円を描く

円を描画するには、arcメソッドを使います。

arc(X, Y, 開始角度, 終了角度, 反時計回り);

角度はラジアンで指定します。また、時計回りに増加していきます。

マウスを乗せると描画します。

---

---

---

<canvas id="drawArcCanvas1" style="border: 1px solid;" onmouseover="drawArc1();width="400" height="300">
</canvas>
<script language="javascript" type="text/javascript">
function drawArc1() {
    var c = document.getElementById("drawArcCanvas1");
    var context = c.getContext("2d");
    context.arc(200, 150, 100, 0 , 2 * Math.PI, false);
    context.strokeStyle = "#FFCCCC";
    context.lineWidth = 6;
    context.fillStyle = "#CCCCFF";
    context.fill();
    context.stroke();
}
</script>

---

マウスを乗せると描画します。

---

---

---

<canvas id="drawArcCanvas2" style="border: 1px solid;" onmouseover="drawArc2();" width="400" height="300">
</canvas>
<script language="javascript" type="text/javascript">
function drawArc2() {
    var c = document.getElementById("drawArcCanvas2");
    var context = c.getContext("2d");
    context.arc(200, 150, 100, 0, Math.PI / 2, false);
    context.strokeStyle = "#FFCCCC";
    context.lineWidth = 6;
    context.fillStyle = "#CCCCFF";
    context.fill();
    context.stroke();
}
</script>

---