例
二次ベジェ曲線を描きます：
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() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
定義と使用法
quadraticCurveTo()メソッドは、2次ベジエ曲線を表す指定されたコントロールポイントを使用して、現在のパスにポイントを加算します。
二次ベジェ曲線は、2つの点を必要とします。 最初の点は、二次ベジェ計算に使用され、第二の点は、曲線の終点である制御点です。 曲線の出発点は、現在のパスの最後のポイントです。 パスが存在しない場合、使用beginPath()とmoveTo()の開始点を定義する方法を。
出発地点：
moveTo( 20,20 ) コントロールポイント：
quadraticCurveTo( 20,100 ,200,20) 終点：
quadraticCurveTo(20,100, 200,20 ) Tip:チェックアウトbezierCurveTo()メソッドを。 それは1つではなく、2つのコントロールポイントがあります。
| JavaScriptシンタックス： | context 。 quadraticCurveTo( cpx,cpy,x,y ) ; |
|---|
パラメータ値
| パラメーター | 説明 | それを再生します |
|---|---|---|
| cpx | ベジェ制御点のx座標 | それを再生します» |
| cpy | ベジェ制御点のy座標 | それを再生します» |
| x | 終点のx座標 | それを再生します» |
| y | 終点のy座標 | それを再生します» |