ブログでHTML5 Canvas 円

円弧
前回までは直線を描いていました。
今回は曲線っぽいものを描いてみましょう。

<canvas id="drawArcCanvas" width="300" height="200"></canvas>
<script>
    (function() {
        var canvas = document.getElementById("drawArcCanvas");
        var context = canvas.getContext("2d");
        context.beginPath();
        context.arc(100, 100, 100, 0, Math.PI, false);
        context.stroke();
    })();
</script>

context.arc(x, y, radius, startAngle, endAngle, counterClockwise);

xは円の中心のx座標です。
yは円の中心のy座標です。
radiusは円の半径です。
startAngleはスタート地点の角度です。単位はラジアンです(0＝0度、Math.PI=180度)。
endAngleは終点の角度です。単位はラジアンです。
counterClockwiseは省略可能です。描画が反時計回りになるか、時計回りになるかを指定します。falseなら時計回りで、trueなら反時計回りです。

---

円
円を描くには終点の角度がスタート地点の角度に追いつくようにします。
つまり終点の角度をMath.PI * 2（360度）にするのです。

<canvas id="drawCircleCanvas" width="300" height="200"></canvas>
<script>
    (function () {
        var canvas = document.getElementById("drawCircleCanvas");
        var context = canvas.getContext("2d");
        context.beginPath();
        context.arc(100, 100, 100, 0, Math.PI * 2, false);
        context.stroke();
    })();
</script>