HTML5 canvas bezierCurveTo メソッド
 HTML5 canvas リファレンス
例
ある点から別の点へパスを描画し、2つの controllpoint からパスを伸ばします:
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();
Try it yourself »
定義と用法
bezierCurveTo メソッドは、2つの controlpoint を経由して、パスの現在ポイントから指定されたポイント点へ線を作成します。
bezierCurveTo メソッドは、最初の controlpoint の x 座標と y 座標、
2番目の controlpoint の x 座標と y 座標と、指定先の x 座標と y 座標の 6 つのパラメータをとります。
現在のポイント moveTo(20,20)
CurveTo ポイント bezierCurveTo(20,100,200,100,200,20)
Controllpoint 1 bezierCurveTo(20,100,200,100,200,20)
Controllpoint 2 bezierCurveTo(20,100,200,100,200,20)
チップ: quadraticCurveTo メソッドをチェックしてください。それには、2 つではなく 1 つの controllpoint があります。
| JavaScript 構文: |
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y); |
ブラウザ・サポート
bezierCurveTo メソッドは、主要な全ブラウザがサポートしています。
パラメータ値
| パラメータ |
値 |
説明 |
Play it |
| cp1x |
x-coordinate |
最初の controlpoint の x 座標 |
Play it » |
| cp1y |
y-coordinate |
最初の controlpoint の y 座標 |
Play it » |
| cp2x |
x-coordinate |
2番目の controlpoint の x 座標 |
Play it » |
| cp2y |
y-coordinate |
2番目の controlpoint の y 座標 |
Play it » |
| x |
x-coordinate |
線を引く場所の x 座標 |
Play it » |
| y |
y-coordinate |
線を引く場所の y 座標 |
Play it » |
HTML5 canvas リファレンス
|