ベジェ曲線を描画する

ベジエ曲線を描画するには、以下のメソッドを使います。

描画メソッド	内容
quadraticCurveTo(X1, Y1, X2, Y2)	現在位置から(X2, Y2)までのベジェ曲線を描画。その際、(X1, Y1)を使って２次ベジェ曲線カーブをかけます。
bezierCurveTo(X1, Y1, X2, Y2, X3, Y3)	現在位置から(X3, Y3)までのベジェ曲線を描画。その際、(X1, Y1), (X2, Y2)を使って３次ベジェ曲線カーブをかけます。

下の例は、赤線がquadraticCurveToを使った描画で、青線がbezierCurveToを使った描画です。

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

---

---

---

<canvas id="drawBezierCurveCanvas" style="border: 1px solid;" onmouseover="drawBezierCurve();" width="400" height="300">
</canvas>
<script language="javascript" type="text/javascript">
function drawBezierCurve() {
    var c = document.getElementById("drawBezierCurveCanvas");    var context = c.getContext("2d");
    context.beginPath();
    context.moveTo(100, 50);
    context.quadraticCurveTo(300, 0, 300, 250);
    context.strokeStyle = "#FF0000";
    context.stroke();

    context.beginPath();
    context.moveTo(100, 50);
    context.bezierCurveTo(300, 0, 300, 250, 350, 50);
    context.strokeStyle = "#0000FF";
    context.stroke();
}
</script>

---