例
2次ベジエ曲線を描画します：
JavaScriptを：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke(); »それを自分で試してみてください ブラウザのサポート
表中の数字は完全に方法をサポートする最初のブラウザのバージョンを指定します。
| 方法 | |||||
|---|---|---|---|---|---|
| quadraticCurveTo() | はい | 9.0 | はい | はい | はい |
定義と使用法
quadraticCurveTo()メソッドは、2次ベジエ曲線を表す指定されたコントロールポイントを使用して、現在のパスにポイントを追加します。
二次ベジェ曲線は2点が必要です。 最初のポイントは、2次ベジエの計算に使用され、第二の点は、曲線の終点である制御点です。 曲線の開始点は、現在のパスの最後の点です。 パスが存在しない場合、使用beginPath()とmoveTo()の開始点を定義する方法を。
始点：
moveTo（20,20） コントロールポイント：
quadraticCurveTo（20100、200,20） 終点：
quadraticCurveTo（20100、200,20） ヒント：チェックアウトbezierCurveTo()メソッドを。それは1つではなく、2つの制御点があります。
| JavaScriptシンタックス： | context.quadraticCurveTo(cpx,cpy,x,y); |
|---|
パラメーター値
| パラメーター | 説明 | それを再生します |
|---|---|---|
| cpx | ベジェ制御点のx座標 | それを再生します» |
| cpy | ベジェ制御点のy座標 | それを再生します» |
| x | 終点のx座標 | それを再生します» |
| y | 終点のy座標 | それを再生します» |