JavaScript入門[HTML5編]円・円弧を描く

円と円弧を描く命令文 arc()

最初に、円や円弧を書く時の命令文arc()について見ておきましょう。

context.arc( x , y , 半径 , 開始角度 , 終了角度 , 回り方 )

x…円の中心のx座標

y…円の中心のy座標

三つ目の引数は半径を指定

開始角度をラジアンで指定。0の時は右（時計の3時の位置）

終了角度をラジアンで指定。

回り方はtrueで反時計回り、falseで時計回り。

ここでラジアンという、数学の教科書に出てきそうな言葉が出てきました。 でも難しく考えないで下さい。ラジアンで表すと180°はπ（パイ）、360°は2π（2パイ）となります。

π（パイ）は3.14159…というあの有名な数値です。 これをJavaScriptで取得するのにMath.PIを使うことができました。 ですから半円を描く場合はMath.PIを、円を描く場合はMath.PI*2を終了角度に指定すればいいことになります。

円を描く

では、実際に円を描いてみたいと思います。以下のコードを書いてみてください。

<canvas id="cv" width="360" height="240"></canvas>

<script>
var ctx = document.getElementById("cv").getContext("2d");
ctx.beginPath();
ctx.arc(120, 120, 100, 0, Math.PI*2, true);
ctx.stroke();
</script>

＜描画結果＞canvasタグにはCSSで二重線の枠を付けています

上記コードでは、座標(120,120)を中心に、半径100ピクセルの円を描いています。 円周は2π、つまり1周ちょうどです。円弧ではないので、開始位置と回り方は特に気にする必要はないです。

円弧を描く

今度は円弧を描いてみたいと思います。 円弧を描くには、開始角度、終了角度、回り方も考えて指定する必要があります。 ただ円弧を描くのもつまらないので、120°の扇形を描く方法を考えてみましょう。

開始角度を0にすると、右側（時計で言う3時の位置）からスタートになりました。 これを2時の位置からスタートさせるには30°ずらす必要があります。 これをラジアンで表すとどうなるでしょうか？ 180°がπなので、30°はその6分の1、つまり「Math.PI/6」と表せます。 ただしこのまま指定すると4時の位置になります。それで、2時の位置にするにはマイナスを付けます。

終了位置は時計の10時の位置にします。3時の位置からすると反時計回りに150°です。 これをラジアンで表すとどうなるでしょうか？30°の5倍ですから、 「-(Math.PI/6)*5」とすればよいでしょう。

ではこれらを元に、円弧＋2本の直線で扇型を描いてみましょう。

<canvas id="cv2" width="360" height="240"></canvas>

<script>
var ctx2 = document.getElementById("cv2").getContext("2d");
ctx2.beginPath();
ctx2.arc(120, 120, 100, -Math.PI/6, -(Math.PI/6)*5, true);
ctx2.lineTo(120,120);
ctx2.closePath();
ctx2.stroke();
</script>

＜描画結果＞canvasタグにはCSSで二重線の枠を付けています

上記スクリプトでは、座標(120,120)を中心とする半径100ピクセルの円弧を、 開始位置マイナス30°、終了位置マイナス150°、反時計回りで描画しています。 その後円の中心まで線を伸ばし、closePath()で開始点までもう一本線を引いて、扇形を閉じています。

次のページでは、線のスタイルを指定する方法を見てみたいと思います。