例
次ベジェ曲線を描画します：
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 9の、Firefoxの、オペラ、クロム、およびSafariがサポートしbezierCurveTo()メソッドを。
注：Internet Explorer 8の以前のバージョンをサポートしていない<canvas>要素を。
定義と使用法
bezierCurveTo()メソッドは、次ベジェ曲線を表す指定されたコントロールポイントを使用して、現在のパスにポイントを追加します。
三次ベジエ曲線は3点が必要です。 最初の2点は次ベジェ計算に使用されている制御点であり、最後の点は、曲線の終点です。 曲線の開始点は、現在のパスの最後の点です。 パスが存在しない場合、使用beginPath()とmoveTo()の開始点を定義する方法を。
始点
moveTo（20,20） コントロールポイント1
いるbezierCurveTo（20100、200,100,200,20） コントロールポイント2
いるbezierCurveTo（20100、200100、200,20） 終点
いるbezierCurveTo（20100200100、200,20） ヒント：チェックアウトquadraticCurveTo()メソッドを。その代わりに、二つのうちの一つの制御点を有します。
| JavaScriptシンタックス： | context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y); |
|---|
パラメーター値
| パラメーター | 説明 | それを再生します |
|---|---|---|
| cp1x | 最初のベジェ制御点のx座標 | それを再生します» |
| cp1y | 最初のベジェ制御点のy座標 | それを再生します» |
| cp2x | 第二のベジェ制御点のx座標 | それを再生します» |
| cp2y | 第二のベジェ制御点のy座標 | それを再生します» |
| x | 終点のx座標 | それを再生します» |
| y | 終点のy座標 | それを再生します» |