HTMLキャンバス bezierCurveTo() メソッド
定義と使用方法
bezierCurveTo() メソッドを使用して、三次ベジェ曲線を表す指定された制御点を現在のパスに追加します。
ヒント：三次ベジェ曲線は3つの点が必要です。最初の2つの点は三次ベジェ計算の制御点であり、第3つの点は曲線の終端点です。曲線の始端点は現在のパスの最後の点です。パスが存在しない場合は、 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)
ヒント：参照してください： quadraticCurveTo() メソッド。これは2つのではなく、1つの制御点を持っています。
インスタンス
三次ベジェ曲線を描画します：
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();
構文
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
パラメータの値
| パラメータ | 説明 |
|---|---|
| cp1x | 第1のベジェ制御点の x 座標。 |
| cp1y | 第1のベジェ制御点の y 座標。 |
| cp2x | 第2のベジェ制御点の x 座標。 |
| cp2y | 第2のベジェ制御点の 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> 要素がサポートされていません。
