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() メソッドでベジェ曲線を描きます。

JavaScript入門