HTMLキャンバスbezierCurveTo()メソッド

❮HTMLキャンバスリファレンス

立方体のベジエ曲線を描きます。

あなたのブラウザはHTML5canvastagをサポートしていません。

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();

ブラウザのサポート

インターネットエクスプローラ Firefox オペラ グーグルクローム サファリ

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


定義と使用法

bezierCurveTo()メソッドは、3次ベジェ曲線を表す指定された制御点を使用して現在のパスに点を追加します。

立方ベジェ曲線には3つの点が必要です。最初の2つのポイントは、3次ベジエ計算で使用される制御ポイントであり、最後のポイントは曲線の終点です。曲線の開始点は、現在のパスの最後の点です。パスが存在しない場合は、 beginPath( )メソッドと moveTo()メソッドを使用して開始点を定義します。

立方ベジェ曲線

始点
moveTo(20,20
コントロールポイント1
bezierCurveTo(20,100、200,100,200,20
コントロールポイント2
bezierCurveTo(20,100、200,100、200,20
終点
bezierCurveTo(20,100,200,100、200,20

ヒント: quadraticCurveTo()メソッドを確認してください。2つではなく1つのコントロールポイントがあります。


JavaScript構文: コンテキスト.bezierCurveTo(cp1x、cp1y、cp2x、cp2y、x、y);

パラメータ値

Parameter Description Play it
cp1x The x-coordinate of the first Bézier control point
cp1y The y-coordinate of the first Bézier control point
cp2x The x-coordinate of the second Bézier control point
cp2y The y-coordinate of the second Bézier control point
x The x-coordinate of the ending point
y The y-coordinate of the ending point

❮HTMLキャンバスリファレンス