canvasで円を描画する関数arcの第三引数以外の意味がよくわからず理解できません。
ブレイクスルーjavascriptという書籍の66頁によれば、
javascript
1var canvas = document.getElementById("canvas"); 2var ctx = canvas.getContext("2d"); 3 4//ctx.arc(円の中心のX座標,円の中心のY座標,円の半径,円の始まりの角度,円の終わりの角度,描く向き); 5ctx.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になり、表示されないということであっておりますか。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/10/13 10:33