JS5 :HTML5向けjavascriptフレームワークのチュートリアルサイト

弧の描画

円弧の描画はarc()を使用します。弧の中心座標、半径、弧の開始角、弧の終了角、描画方向が指定できます。実際の描画はこんなイメージです。

    //arc(x座標,y座標,弧の半径,弧の開始角,弧の終了角,描画方向)
    g.setStrokeStyle(5)
        .beginStroke("#333")
        .beginFill("#ccc")
        .arc(10,-25,100,Math.PI*0.0,Math.PI*0.5,true);

第1引数、第2引数は弧の中心座標です。第3引数は弧の半径。ここまでは簡単。ここで厄介なのが第4引数と第5引数です。ここで指定するべき値はラジアン。ラジアンについてあまり詳しくは解説しませんが、とりあえず 360°=2π、とだけ覚えておけば問題ないです。
そしてラジアンで開始角と終了角を指定したあと、描画方向を指定します。デフォルトは時計まわりですが、円周を逆に辿って弧を描画したい場合もあるかもしれません。そんな場合はここでbool値を指定してください。

ラジアンのおさらい

ラジアンって何だったっけ？という方の為に。「1ラジアン=弧の円周と半径の長さが等しくなった時の角度」です。式にすると、「ラジアン=弧の長さ÷半径の長さ」となります。半径1の円を考えたとき、その半円の円周はπになりますので、ラジアンはπ÷1でπとなります。つまり180°の場合はπラジアンで、360°の場合は必然的に2πラジアンですね。

サンプル

描画は塗りと、境界線の描画を行っています。塗りは自動的にパスが閉じられますが、境界線はパスが閉じられない事に注意してください。また、arcメソッドでは円グラフのような扇形は描けません。