サイト内検索

quadraticCurveTo() メソッド

構文

context . quadraticCurveTo(cpx, cpy, x, y)

現在のパスに指定の地点を加え、指定の制御点を伴う二次ベジェ曲線によって、直前の地点と接続します。

仕様

quadraticCurveTo(cpx, cpy, x, y) メソッドは、(cpx, cpy) に対するサブパスを定義し、それから、サブパスの終点を、制御点 (cpx, cpy) を伴う二次ベジェ曲線を使って、指定地点 (x, y) と結ばなければいけません。そして、指定地点 (x, y) をサブパスに加えなければいけません。[BEZIER]


原文:http://www.w3.org/TR/2010/WD-2dcontext-20100624/#dom-context-2d-quadraticcurveto

サンプル

quadraticCurveToメソッドのサンプル

このサンプルでは、左上の (10, 10) を始点とし、制御点が (50, 90) で、右上の (90, 10) に向かう二次曲線を描いています。

ctx.beginPath();
ctx.moveTo(10, 10);
ctx.quadraticCurveTo(50, 90, 90, 10);
ctx.stroke();

[quadraticCurveTo() メソッドの実際のサンプル]

quadraticCurveTo() メソッドで描かれる二次曲線は、直観的に分かりにくいものです。上記のサンプルに補助線を入れると分かりやすくなります。

quadraticCurveToメソッドのサンプルに補助線を入れた図

緑色の点が始点です。青色の点が制御点です。紫色の点が終点です。制御点から始点と終点に向けて赤色の補助線を引いてみました。ご覧のように、quadraticCurveTo() メソッドで描かれる曲線は、始点と終点に接するような曲線として描かれます。この特性のおかげで、多角形の角を丸めるのに役に立ちます。[補助線入りの実際のサンプル]

応用例

角を丸めた矩形

quadraticCurveToメソッドを使って角を丸めた矩形を描くサンプル

quadraticCurveTo() メソッドが最も使われるシーンは、多角形の角を丸める場合でしょう。このサンプルのような矩形の場合は、lineTo() メソッドで矩形の直線にあたる部分を描き、それに接するように二次曲線を quadraticCurveTo() メソッドで描きます。二次曲線の制御点には、多角形の頂点を指定します。これを4辺分繰り返すことで、角を丸めた矩形が描けます。

ctx.beginPath();
ctx.moveTo(20, 10);
ctx.lineTo(80, 10);
ctx.quadraticCurveTo(90, 10, 90, 20);
ctx.lineTo(90, 80);
ctx.quadraticCurveTo(90, 90, 80, 90);
ctx.lineTo(20, 90);
ctx.quadraticCurveTo(10, 90, 10, 80);
ctx.lineTo(10, 20);
ctx.quadraticCurveTo(10, 10, 20, 10);
ctx.stroke();

[quadraticCurveTo() メソッドで角を丸めた矩形を描く実際のサンプル]

ブラウザ対応状況

Firefox Safari Chrome Opera IE ExplorerCanvas
2 ○ 2 ○ 1 ○ 9.2 ○ 9 ○ 0002 ○
3 ○ 3 ○ 2 ○ 9.5 ○   3 ○
3.5 ○ 4 ○ 3 ○ 10 ○    
3.6 ○ 5 ○ 6 ○ 10.60 ○