HTMLキャンバス quadraticCurveTo() メソッド
定義と使用法
quadraticCurveTo() メソッドを使用して、指定された制御点を通じて現在のパスに点を追加します。
ヒント：二次ベセル曲線には2つの点が必要です。第1の点は二次ベセル計算における制御点で、第2の点は曲線の終了点です。曲線の開始点は現在のパスの最後の点です。パスが存在しない場合は、 beginPath() および moveTo() メソッドを使用して開始点を定義します。
- 開始点：moveTo(
20,20) - 制御点：quadraticCurveTo(
20,100,200,20) - 終了点：quadraticCurveTo(20,100,
200,20)
ヒント：以下を確認してください bezierCurveTo() メソッド。これは1つの制御点ではなく、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();
文法
context.quadraticCurveTo(cpx,cpy,x,y);
パラメータの値
| パラメータ | 説明 |
|---|---|
| cpx | ベセル制御点の x 座標。 |
| cpy | ベ塞尔制御点の y 座標。 |
| x | 終端点の x 座標。 |
| y | 終端点の y 座標。 |
ブラウザのサポート
表の数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
注記：Internet Explorer 8 以前のバージョンでは <canvas> 要素がサポートされていません。
