サイト内検索

arc() メソッド

構文

context . arc(x, y, radius, startAngle, endAngle, anticlockwise)

サブパスにいくつかの地点を追加します。それらの地点は、引数によって描かれる円周によって描かれる円弧が、指定の開始角度ではじまり、指定の終了角度で終わり、指定の方向に行き、パスに加えられます。そして、直線で直前の地点に接続されます。

指定の半径が負数なら、INDEX_SIZE_ERR を投げます。

仕様

arc(x, y, radius, startAngle, endAngle, anticlockwise) メソッドは、円弧を描きます。コンテキストにサブパスがあれば、このメソッドは、サブパスの最終地点から円弧の開始地点まで直線を引きます。いずれにせよ、円弧の開始地点と円弧の終了地点の間に円弧を描きます。そして、サブパスに円弧の開始地点と終了地点を加えます。円弧とその開始地点と終了地点は、次の通り定義されます:

中心が (x, y) で、半径が radius となる円を考えます。円周に沿って、x 軸の正方向から時計回りにラジアンで計測した startAngleendAngle にあたる地点が、それぞれ、開始地点と終了地点となります。

anticlockwise 引数が false で endAngle-startAngle が 2π 以上、または、anticlockwise 引数が truestartAngle-endAngle が 2π 以上なら、その円弧は、この円周全体となります。

そうでなければ、円弧は、開始地点から終了地点までの円周に沿ったパスとなります。このパスは、anticlockwise 引数が true なら反時計回りとなり、そうでなければ時計回りとなります。その地点は円上にあるため、単にゼロからの角度とはいっても、その円弧は ラジアンより大きい角度をカバーすることは決してできません。もし 2 つの地点が同じなら、または、その半径が 0 なら、その円弧はどちらの方向にも長さ 0 だとして定義されます。

radius に負の値が指定されると、INDEX_SIZE_ERR 例外を発生させなければいけません。


原文:http://www.w3.org/TR/2010/WD-2dcontext-20100624/#dom-context-2d-arc

サンプル

時計回りの円弧

arcメソッドのサンプル(時計回り)

中心座標 (50, 50) で半径 40 ピクセルの円に沿って、x 軸正方向(右方向)を基準に 0° の位置から時計回りで 135° の位置までを、時計回りで円弧を描いた例。

ctx.beginPath();
var startAngle = 0;
var endAngle = 135 * Math.PI / 180;
ctx.arc(50, 50, 40, startAngle, endAngle, false);
ctx.stroke();

[arc() メソッドの実際のサンプル1]

反時計回りの円弧

arcメソッドのサンプル(反時計回り)

中心座標 (50, 50) で半径 40 ピクセルの円に沿って、x 軸正方向(右方向)を基準に 0° の位置から反時計回りで 135° の位置までを、時計回りで円弧を描いた例。

ctx.beginPath();
var startAngle = 0;
var endAngle = 135 * Math.PI / 180;
ctx.arc(50, 50, 40, startAngle, endAngle, true);
ctx.stroke();

[arc() メソッドの実際のサンプル2]

ブラウザ対応状況

Firefox Safari Chrome Opera IE ExplorerCanvas
2 ○ 2 ○ 1 ○ 9.2 ○ 9 ○ 0002 ○
3 ○ 3 ○ 2 ○ 9.5 ○   3 ○
3.5 ○ 4 ○ 3 ○ 10 ○    
3.6 ○ 5 ○ 6 ○ 10.60 ○