HTML canvas bezierCurveTo() メソッド

HTML canvas Reference HTML Canvas リファレンス

例

三次ベジェ曲線を描画します：

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.stroke();

Try it Yourself ❯

ブラウザ・サポート

Internet Explorer 9、Firefox、Opera、Chrome、Safari は、bezierCurveTo() メソッドをサポートしています。

注: Internet Explorer 8 以前のバージョンでは、<canvas> 要素をサポートしていません。

定義と用法

bezierCurveTo() メソッドは、三次ベジェ曲線を表す指定のコントロールポイントを使用して、現在のパスにポイントを追加します。

三次ベジエ曲線には、3 つのポイントが必要です。最初の 2 つのポイントは三次ベジェ計算に使用されるコントロールポイントで、最後のポイントは、曲線の終了ポイントです。カーブの開始ポイントは、現在のパスの最後のポイントです。パスが存在しない場合は、開始ポイントを定義するために、beginPath() と moveTo() メソッドを使用します。

Start point

moveTo(20,20)

Control point 1

bezierCurveTo(20,100,200,100,200,20)

Control point 2

bezierCurveTo(20,100,200,100,200,20)

End point

bezierCurveTo(20,100,200,100,200,20)

チップ: quadraticCurveTo() メソッドをチェックしてください。それには、control ポイントが 2 つではなく 1 つだけです。

JavaScript 構文：	context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

パラメータの値

パラメータ	説明	Play it
cp1x	最初のベジェコントロールポイントの x 座標	Play it ❯
cp1y	最初のベジェコントロールポイントの y 座標	Play it ❯
cp2x	2 番目のベジェコントロールポイントの x 座標	Play it ❯
cp2y	2 番目のベジェコントロールポイントの y 座標	Play it ❯
x	終了ポイントの x 座標	Play it ❯
y	終了ポイントの y 座標	Play it ❯

HTML Canvas リファレンス