Canvas 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 | 一番目のベセル制御点のx座標。 |
| cp1y | 一番目のベセル制御点のy座標。 |
| cp2x | 二番目のベセル制御点のx座標。 |
| cp2y | 二番目のベ塞尔制御点の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> エレメントをサポートしていません。
