例
立方ベジェ曲線を描きます：
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(); »それを自分で試してみてください ブラウザのサポート
表中の数字は完全に方法をサポートする最初のブラウザのバージョンを指定します。
| 方法 | |||||
|---|---|---|---|---|---|
| bezierCurveTo() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
定義と使用法
bezierCurveTo()メソッドは、立方ベジェ曲線を表す指定されたコントロールポイントを使用して、現在のパスにポイントを加算します。
三次ベジエ曲線は三点が必要です。 最初の2点が立方ベジェ計算に使用される制御点であり、最後の点は、曲線の終点です。 曲線の出発点は、現在のパスの最後のポイントです。 パスが存在しない場合、使用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 ) Tip:チェックアウトquadraticCurveTo()メソッドを。 それは代わりに二つのうちの一つの制御点があります。
| JavaScriptシンタックス： | context 。 bezierCurveTo( cp1x,cp1y,cp2x,cp2y,x,y ) ; |
|---|
パラメータ値
| パラメーター | 説明 | それを再生します |
|---|---|---|
| cp1x | 最初のベジェ制御点のx座標 | それを再生します» |
| cp1y | 最初のベジェ制御点のy座標 | それを再生します» |
| cp2x | 第二のベジエ制御点のx座標 | それを再生します» |
| cp2y | 第二のベジエ制御点のy座標 | それを再生します» |
| x | 終点のx座標 | それを再生します» |
| y | 終点のy座標 | それを再生します» |