HTML canvas bezierCurveTo()メソッド

Canvas 对象参考手册Canvas オブジェクト

例

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

YourbrowserdoesnotsupporttheHTML5canvastag.

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

試してみる »

ブラウザサポート

Internet Explorer Firefox Opera Google Chrome Safari

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

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

定義と使用方法

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

三次ベジェ曲線には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()メソッド。制御点は1つで、2つではありません。


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

パラメータ値

パラメータ 説明
cp1x 最初のベジェ制御点のx座標。
cp1y 最初のベジェ制御点のy座標。
cp2x 2番目のベジェ制御点のx座標。
cp2y 2番目のベジェ制御点のy座標。
x 終了点のx座標。
y 終了点のy座標。

Canvas 对象参考手册Canvas オブジェクト

その他の拡張