JavaScript: canvas にベジェ曲線を描画する
HTML5 Canvas API を使って、ベジェ曲線を描画します。
ベジェ曲線とは下図のような曲線で、n個の制御点に基づいて描かれる n-1次曲線です。 2次ベジェ曲線は3個の制御点に基づいて描かれ、3次ベジェ曲線は 4個の制御点に基づいて描かれます。
下図では、左側が2次ベジェ曲線、右側が3次ベジェ曲線です。

HTML5 Canvas API には、2次ベジェ曲線を描く quadraticCurveTo() メソッドと、 3次ベジェ曲線を描く bezierCurveTo() メソッドがあります。
それぞれの構文は次の通りです。(始点を x0, y0 とする)
// 2次ベジェ曲線
quadraticCurveTo(x1, y1, x2, y2)
// 3次ベジェ曲線
bezierCurveTo(x1, y1, x2, y2, x3, y3)
サンプルコード: ベジェ曲線を描く
HTML・CSS
<canvas id="canvas"></canvas>
<style>
canvas {
border: 1px solid silver;
}
</style>
JavaScript
var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');
// 2次ベジェ曲線
c.strokeStyle = 'red';
c.lineWidth = 2;
c.beginPath();
c.moveTo(10, 10);
c.quadraticCurveTo(130, 80, 10, 140);
c.stroke();
// 直線
c.strokeStyle = 'silver';
c.lineWidth = 1;
c.beginPath();
c.moveTo(10, 10);
c.lineTo(130, 80);
c.lineTo(10, 140);
c.stroke();
// 3次ベジェ曲線
c.strokeStyle = 'blue';
c.lineWidth = 2;
c.beginPath();
c.moveTo(160, 10);
c.bezierCurveTo(290, 50, 160, 90, 290, 140);
c.stroke();
// 直線
c.strokeStyle = 'silver';
c.lineWidth = 1;
c.beginPath();
c.moveTo(160, 10);
c.lineTo(290, 50);
c.lineTo(160, 90);
c.lineTo(290, 140);
c.stroke();
左側の赤い曲線が2次ベジェ曲線、右側の青い曲線が3次ベジェ曲線です。
どのように曲線を描くのかがわかりやすいように、 silver色で直線を描画しています。
ポイントとしては、最初にmoveTo() メソッドで始点に移動し、 その後に quadraticCurveTo() メソッドや bezierCurveTo() メソッドでベジェ曲線を描きます。