円を描く(arc) [html5 の Canvas を使ってみる：第二回]

次に、円を描いてみる。

★html 側

<canvas id="arc"></canvas>

★Javascript 側

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

// 描画をすることを宣言
  c.beginPath();
// 中心座標が x:50、y:50、半径が 30、
// 0°の位置から 180°の半円を描画
// 2π以上が円周の描画として扱われるため、
// 角度を乗算すると同時に 180 で除算する必要がある
  c.arc(50, 50, 30, 0, (180 * Math.PI / 180), false);
// これらの座標に対して線を引く指令
  c.stroke();
}

すると、こうなる。


また、arc の最後の引数を true に変えると、こうなる。

  c.arc(50, 50, 30, 0, (180 * Math.PI / 180), true);

上記の場合、stroke(); を記述しなければ、白くて枠のない円が描画される。fillStyle で色を塗っておけば、その色だけの円を描くことができる。但し、上記のように 2π 未満の場合は、円周の端と端を直線で繋ぐように塗られてしまうので、扇形を描きたい場合は 扇形を作る を参照。

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

W3C；
4.8.11 The canvas element — HTML 5