星形を描く(lineTo+closePath) [html5 の Canvas を使ってみる：第九回]

それでは、これも検索結果になかったので、星形を描いてみる。

星形の各座標は、余弦定理を用いれば求めることができる。ここでは、枠線を青で、内部の色を 50% の青で塗った星を描いてみる。

★html 側

<canvas id="star"></canvas>

★Javascript 側

onload = function() {
// 画面ロード時に描画を実行
  draw();
};
function draw() {
// id: star で 2 次元描画を行うことの定義
  var c = document.getElementById("star").getContext('2d');

// 描画をすることを宣言
  c.beginPath();
// 上記を描画する function をコールする
// 引数：中心 x、中心 y、半径、線の色、塗る色、大小、対象
  star(70, 70, 50, "rgb(0, 0, 255)", "rgba(0, 0, 255, .5)", c);
// これらの座標に対して線を引く指令
  c.stroke();
}
function star(x, y, radius, strokeColor, fillColor, target) {
// 使用する角度θを定義
// 星の各頂点の角度の総和が 360°であることを利用
  var theta = 72 * Math.PI / 180;
// 頂点の座標を筆おろしとする
  target.moveTo(x, (y - radius));
// 右下の座標
  target.lineTo(Math.round(x + radius * Math.sin(2 * theta)), Math.round(y - radius * Math.cos(2 * theta)));
// 左上の座標
  target.lineTo(Math.round(x - radius * Math.sin(theta)), Math.round(y - radius * Math.cos(theta)));
// 右上の座標
  target.lineTo(Math.round(x + radius * Math.sin(theta)), Math.round(y - radius * Math.cos(theta)));
// 左下の座標
  target.lineTo(Math.round(x - radius * Math.sin(2 * theta)), Math.round(y - radius * Math.cos(2 * theta)));
// 左下の座標と頂点を閉じる
  target.closePath();
// 線の色をつける
  target.strokeStyle = strokeColor;
// 内部の色を塗る
  target.fillStyle = fillColor;
// 塗る指令
  target.fill();
// これらの座標に対して線を引く指令
  target.stroke();
}

すると、こうなる。


確認環境：
Safari 5.0、Firefox 3.6.3、Chrome 5.0.375.70、Opera 10.53