Hyper Text Markup Language 5

円形の描画

キャンバスに円形を描画します。円形を描画する際の、それぞれの引数は以下の通りとなっています。右から、円の中心の座標(x, y)、radiusは円の半径、startAngleは円を描き始める角度、endAngleは円を描き終える角度、anticlockwiseは円を描く向きを真偽値(trueかfalse)で指定します。

// 円形の描画
	arc(x, y, radius, startAngle, endAngle, anticlockwise);

サンプル

円を描画する際は、角度はラジアンで表わすので注意して下さい。サンプルでは、円を描き始める角度を0として、円を描き始める角度に円周率πを用いていることが分かります。円周率πはJavaScriptではMath.PIで表わされ、円を描画する際は頻繁に用います。左上の円は円を描き終える角度を2π（2*Math.PI）としているので、円が表わされることが分かります。

右上の円弧は円を描き終える角度をπ（Math.PI）としているので、丁度90°の位置で終わっていることが分かります。またanticlockwiseをfalseにしているので、下側の線だけ描画されています。左下の半円はfillメソッドを用いて、最後に始点と終点を結んで描画しています。右下の図形はちょっとした応用例で、円を書き終える角度を(3/2)πとし、lineToで直線を円の中心まで描き、最後にfillで塗りつぶすことによって、一部だけ掛けたような円を描画しています。

// 円形の描画（左上）
	cx.beginPath();
	cx.arc(80, 70, 40, 0, 2*Math.PI, false);
	cx.stroke();

// 円弧の描画（右上）
	cx.beginPath();
	cx.arc(210, 70, 40, 0, Math.PI, false);
	cx.stroke();

// 半円の描画（左下）
	cx.beginPath();
	cx.arc(80, 210, 40, 0, Math.PI, false);
	cx.fill();

// ちょっとした応用例（右下）
	cx.beginPath()
	cx.arc(210, 210, 40, 0, 3*Math.PI/2, false);
	cx.lineTo(210, 210);
	cx.fill();