arc() メソッド
構文
- context .
arc(x, y, radius, startAngle, endAngle, anticlockwise) -
サブパスにいくつかの地点を追加します。それらの地点は、引数によって描かれる円周によって描かれる円弧が、指定の開始角度ではじまり、指定の終了角度で終わり、指定の方向に行き、パスに加えられます。そして、直線で直前の地点に接続されます。
指定の半径が負数なら、
INDEX_SIZE_ERRを投げます。
仕様
arc(x, y, radius, startAngle, endAngle, anticlockwise) メソッドは、円弧を描きます。コンテキストにサブパスがあれば、このメソッドは、サブパスの最終地点から円弧の開始地点まで直線を引きます。いずれにせよ、円弧の開始地点と円弧の終了地点の間に円弧を描きます。そして、サブパスに円弧の開始地点と終了地点を加えます。円弧とその開始地点と終了地点は、次の通り定義されます：
中心が (x, y) で、半径が radius となる円を考えます。円周に沿って、x 軸の正方向から時計回りにラジアンで計測した startAngle と endAngle にあたる地点が、それぞれ、開始地点と終了地点となります。
anticlockwise 引数が false で endAngle-startAngle が 2π 以上、または、anticlockwise 引数が true で startAngle-endAngle が 2π 以上なら、その円弧は、この円周全体となります。
そうでなければ、円弧は、開始地点から終了地点までの円周に沿ったパスとなります。このパスは、anticlockwise 引数が true なら反時計回りとなり、そうでなければ時計回りとなります。その地点は円上にあるため、単にゼロからの角度とはいっても、その円弧は 2π ラジアンより大きい角度をカバーすることは決してできません。もし 2 つの地点が同じなら、または、その半径が 0 なら、その円弧はどちらの方向にも長さ 0 だとして定義されます。
radius に負の値が指定されると、INDEX_SIZE_ERR 例外を発生させなければいけません。
原文：http://www.w3.org/TR/2010/WD-2dcontext-20100624/#dom-context-2d-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();
反時計回りの円弧
中心座標 (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();
ブラウザ対応状況
| 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 ○ |