CANVASのarcメソッドの引数が分からない

Question

canvasで円を描画する関数arcの第三引数以外の意味がよくわからず理解できません。
ブレイクスルーjavascriptという書籍の66頁によれば、

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

//ctx.arc(円の中心のX座標,円の中心のY座標,円の半径,円の始まりの角度,円の終わりの角度,描く向き);
ctx.arc(100,100,40,0,Math.PI*2); 

ちょっとややこしいのが4番目と5番目の引数です。ここで指定する角度はラジアンで指定しなければいけません。<略>

円を描く場合は、0度から360度までパスを描きたいので「0Math.PI/180」から「360Math.PI/180」まで、これを計算すると、上記のコードになります。

とあります。

まず第一引数と第二引数の説明である円の中心のX座標、Y座標というのは、ブラウザの表示領域の座標に円の中心が来るように…ということでしょうか。

次に第四引数と第五引数ですが、円の始まり角度と円の終わりの角度というのがいまいちよくわかりません。

最後の引数ですが、こちらによると

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

そうでなければ、円弧は、開始地点から終了地点までの円周に沿ったパスとなります。このパスは、anticlockwise 引数が true なら反時計回りとなり、そうでなければ時計回りとなります。その地点は円上にあるため、単にゼロからの角度とはいっても、

その円弧は 2π ラジアンより大きい角度をカバーすることは決してできません。もし 2 つの地点が同じなら、または、その半径が 0 なら、その円弧はどちらの方向にも長さ 0 だとして定義されます。

とありました。anticlockwise(反時計回り)をfalseにすれば時計回りに、trueにすれば時計回りに円や弧が描画されることが分かりました。また第四引数と第五引数が360度以下なら第四引数の数値の位置から終了地点までを結んだ円弧ができあがります。

ですが、

endAngle-startAngle が 2π 以上なら、その円弧は、この円周全体となります。

というのと

その地点は円上にあるため、単にゼロからの角度とはいっても、

その円弧は 2π ラジアンより大きい角度をカバーすることは決してできません。もし 2 つの地点が同じなら、または、その半径が 0 なら、その円弧はどちらの方向にも長さ 0 だとして定義されます。

というのがよくわかりません。前者は2πは度数法でいうと360度なので、引数がfalse或いは、trueで360度以上ならその円弧は円周全体となる、という言葉がよく理解できません。360度あれヴぁ円になることを回りくどくいっているのでしょうか。
後者は、360度より大きい角度をカバー？というか描画しないし、第四引数と第五引数が同じなら、または、第三引数の半径の数値が0なら、円弧の長さが0になり、表示されないということであっておりますか。

Answer 1

arcという名前の通り、このメソッドは完全な円だけではなく円弧を描くためにも使えます。となれば、中心と半径以外に、「どこからどこまで」描くかを指定する必要がありますが、それが4つ目・5つ目の引数です。

角度は、x軸の正方向（右）が0ラジアンになって、そこから時計回りに下がMath.PI/2ラジアン、左がMath.PIラジアン、上がMath.PI*3/2ラジアン、一回転した右がMath.PI*2ラジアン、となります。

あと、canvasに円を1つ描くだけなら、「canvas内の座標」にあまり意味はなくなりますが、他にも図形を描くとなれば、位置関係を決める必要が出てきます。

参考URL

Comments

[aaaaaaaa]

ご回答ありがとうございました。おかげさまで第五引数まで理解することができました。

第六引数の書く向きとはいったいなんなのでしょうか。

Answer 2

向きはオレンジの矢印の方向になります。

デフォルトは false で、時計回りで 0 から Math.PI/2 の位置まで描き
true なら反時計周りで 0 から Math.PI/2 の位置まで描くので

以下の arc を試すとこのような線になります。

false デフォルト 時計回り

ctx.arc(100, 100, 40, 0, Math.PI/2, false)
ctx.stroke()

true 反時計

ctx.arc(100, 100, 40, 0, Math.PI/2, true)
ctx.stroke()