[html5]canvasタグで月の満ち欠けを書いてみる

今回はCanvas - HTML5.JPを参考にしながら、月齢から月の形を計算して、canvasに出力したいと思います。

とりあえず、canvasのIDを取得するJavascript関数を作ります。
Canvasの使い方 - Canvas - HTML5.JPに詳しい情報があります。

view plainprint?

1. function getCanvas (canvasID) {  
2.  var canvasObj = document.getElementById(canvasID);  
3.  if (canvasObj && canvasObj.getContext) {  
4.   return canvasObj.getContext('2d');  
5.  }  
6.  return false;  
7. }  

function getCanvas (canvasID) {
 var canvasObj = document.getElementById(canvasID);
 if (canvasObj && canvasObj.getContext) {
  return canvasObj.getContext('2d');
 }
 return false;
}

これを作ってしまえば、今後キャンバスを使う際に使い回しができます。


まず初めに満月を書いてみましょう。

view plainprint?

1. function drawMoon () {  
2.  var c = getCanvas('TheMoon');  
3.  // 月の半径  
4.  var moon_r = 100;  
5.  // グラデーションの設定  
6.  var gd = c.createRadialGradient(135,135, moon_r*0.9, 140,140, moon_r*1.2);  
7.  gd.addColorStop( 0, 'rgb(233, 84, 100)' );  
8.  gd.addColorStop( 1, 'rgb(123, 74, 80)' );  
9.  // 円を塗りつぶす  
10.  c.beginPath();  
11.  c.arc( 140, 140, moon_r, 0, Math.PI*2, true);  
12.  c.fillStyle = gd;  
13.  c.fill();  
14. }  
15. // HTML  
16. // <canvas id="TheMoon" width="280" height="280"></canvas>  

function drawMoon () {
 var c = getCanvas('TheMoon');
 // 月の半径
 var moon_r = 100;
 // グラデーションの設定
 var gd = c.createRadialGradient(135,135, moon_r*0.9, 140,140, moon_r*1.2);
 gd.addColorStop( 0, 'rgb(233, 84, 100)' );
 gd.addColorStop( 1, 'rgb(123, 74, 80)' );
 // 円を塗りつぶす
 c.beginPath();
 c.arc( 140, 140, moon_r, 0, Math.PI*2, true);
 c.fillStyle = gd;
 c.fill();
}
// HTML
// <canvas id="TheMoon" width="280" height="280"></canvas>

canvasのメソッドについてはCanvas - HTML5.JPを見てね。本稿では解説しません。

drawMoon()を実行すると、半径100pxの円形グラデーションが適用された円が表示されます。
DEMO（月の色が変なのは気にしない）


次は、月が欠けた分だけ影を追加したいと思います。
上から黒で塗りつぶしても良いけど、芸が無いので、globalCompositeOperationプロパティを使って、円に重ねた影の領域を円から削除します。

view plainprint?

1. c.globalCompositeOperation = 'destination-out';  

c.globalCompositeOperation = 'destination-out';

これで準備OK。

次は、影の形を計算したいと思います。
ややこしいので、月の形を完全な球、月の軌道を完全な円にしてしまいます。
つまり、月齢0の時は全部影になって、右の方から光が当たり始めて、月齢7.5で半月（上弦の月）、月齢15で満月。
その後は右から徐々に影が増えて、月齢22.5で半月、月齢30（月齢0）で新月。

影の左右端はコサインで計算できそうだな。
月の中心座標を0,0として、影の左右端x座標をmoon_xとしよう。
月齢0～15のとき、moon_xが-moon_rから+moon_rに変化して、
月齢16～30のとき、moon_xが-moon_rから+moon_rに変化するんだから・・・

view plainprint?

1. var moon_grow = (age>15)? true: false;  
2. var moon_x = Math.cos(age/30*Math.PI*2) * moon_r * (moon_grow? -1: 1);  

var moon_grow = (age>15)? true: false;
var moon_x = Math.cos(age/30*Math.PI*2) * moon_r * (moon_grow? -1: 1);

こんな計算をしてやればOK！
(age>15)? true: false; って条件が反対じゃないかというツッコミが来そうですが、良いんです。
後々、逆にしておく事で計算が簡単になるんだ。

半円の影とmoon_xを結ぶ片側が潰れた円を描けば良いので最終的にこうなります。

view plainprint?

1. function drawMoon (age) {  
2.  var c = getCanvas('TheMoon');  
3.  var a = 0.5522847;  
4.  var moon_grow = (age>15)? true: false;  
5.    
6.  var moon_r = 100;  
7.  var rate = Math.cos(age/30*Math.PI*2);  
8.  var moon_x = moon_r*rate * (moon_grow? -1: 1);  
9.    
10.  var gd = c.createRadialGradient(135,135, moon_r*0.9, 140,140, moon_r*1.2);  
11.  gd.addColorStop( 0, 'rgb(233, 84, 100)' );  
12.  gd.addColorStop( 1, 'rgb(123, 74, 80)' );  
13.    
14.  c.beginPath();  
15.  c.arc( 140, 140, moon_r, 0, Math.PI*2, true);  
16.  c.fillStyle = gd;  
17.  c.fill();  
18.    
19.  c.globalCompositeOperation = 'destination-out';  
20.  c.beginPath();  
21.  c.fillStyle = 'rgb(192, 70, 80)';  
22.  c.arc( 140, 140, moon_r, Math.PI*1/2, Math.PI*3/2, moon_grow);  
23.  c.bezierCurveTo( 140+a*moon_x,140-moon_r,  140+moon_x,140-a*moon_r,  140+moon_x,140);  
24.  c.bezierCurveTo( 140+moon_x,140+a*moon_r,  140+a*moon_x,140+moon_r,  140,140+moon_r);  
25.  c.fill();  
26. }  

function drawMoon (age) {
 var c = getCanvas('TheMoon');
 var a = 0.5522847;
 var moon_grow = (age>15)? true: false;
 
 var moon_r = 100;
 var rate = Math.cos(age/30*Math.PI*2);
 var moon_x = moon_r*rate * (moon_grow? -1: 1);
 
 var gd = c.createRadialGradient(135,135, moon_r*0.9, 140,140, moon_r*1.2);
 gd.addColorStop( 0, 'rgb(233, 84, 100)' );
 gd.addColorStop( 1, 'rgb(123, 74, 80)' );
 
 c.beginPath();
 c.arc( 140, 140, moon_r, 0, Math.PI*2, true);
 c.fillStyle = gd;
 c.fill();
 
 c.globalCompositeOperation = 'destination-out';
 c.beginPath();
 c.fillStyle = 'rgb(192, 70, 80)';
 c.arc( 140, 140, moon_r, Math.PI*1/2, Math.PI*3/2, moon_grow);
 c.bezierCurveTo( 140+a*moon_x,140-moon_r,  140+moon_x,140-a*moon_r,  140+moon_x,140);
 c.bezierCurveTo( 140+moon_x,140+a*moon_r,  140+a*moon_x,140+moon_r,  140,140+moon_r);
 c.fill();
}

c.bezierCurveTo()メソッドで3次ベジェ曲線を使って楕円を描画しています。
制御点の計算が難しかったのですが、こちらを参考に係数をa=0.5522847として決めて様子見したところ、上手くいっていたのでそのまま採用しました。
c.arc( 140, 140, moon_r, Math.PI*1/2, Math.PI*3/2, moon_grow);で月齢16を境に、右半円、左半円を切り替えているところがポイントですかね。

そんなこんなで、色々とキャンバスの理解につながったので良かった。
「今日のお月さま」というサービスでアップしたので、良かったら見て下さい。

今日のお月さま作成にあたり参考にしたサイト
月齢カレンダー
http://koyomi.vis.ne.jp/moonage.htm
Canvasリファレンス - HTML5.JP
http://www.html5.jp/canvas/ref.html
s.h's page - [graphic] ベジエ曲線
http://park12.wakwak.com/~shp/cgi-bin/wiki.cgi/view/bezier_curve
月齢 - Wikipedia
http://ja.wikipedia.org/wiki/%E6%9C%88%E9%BD%A2