パスを使用して HTML5 で 2 次および 3 次のベジェ曲線を描画する Canvas_html5 チュートリアル テクニック

HTML5 Canvas では、次のメソッドを使用して 3 次および 2 次のベジェ曲線を描画できます。

コードをコピーします

コードは次のとおりです:

context.bezierCurveTo(cp1x, cp1y, cp2x , cp2y, x, y)
context.quadraticCurveTo(cpx, cpy, x, y)

ベジェ曲線は、「始点」、「終点」、および 1 つ以上の「制御点」によって 2 次元平面上に定義される曲線です。通常の 3 次ベジェ曲線は 2 つの制御点を使用しますが、2 次曲線は 1 つの制御点のみを使用します。

2 次ベジェ曲線を描画するには、終点の座標と制御点の座標を設定するだけです。

コードをコピー

コードは次のとおりです。

context.moveTo(0, 0);
context.quadraticCurveTo(100,25,0,50);

コードの実行結果は次のとおりです:

上記の例の曲線は座標 (0,0) から始まり (0,50) で終わり、曲線の描画を制御するために使用される制御点の座標は (100,25) です。

3次ベジェ曲線は2次曲線に比べて制御点を2つ設定できるため、より柔軟な描画が可能です。次のコードは、「S」字型の曲線を描きます:

コードをコピーします

コードは次のとおりです:

context.moveTo(150,0);
context.bezierCurveTo(0,125,300,175,150,300);

翻訳注 1: ベジェ曲線については、Wikipedia (http://en.wikipedia.org/wiki/Bézier_curve) のエントリを参照してください。その中のアニメーションでベジェ曲線の生成メカニズムがよく説明されています。

注釈 2: 現在、HTML5 Canvas は 3 次のベジェ曲線までのみサポートしており、4 次を超える曲線はまだサポートされていません。