構文

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

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

仕様

原文：http://www.w3.org/TR/2010/WD-2dcontext-20100624/#dom-context-2d-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() メソッドが最も使われるシーンは、多角形の角を丸める場合でしょう。このサンプルのような矩形の場合は、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() メソッドで角を丸めた矩形を描く実際のサンプル]

ブラウザ対応状況