構文

context . bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

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

仕様

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

サンプル

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

ctx.beginPath();
ctx.moveTo(10, 10);
ctx.bezierCurveTo(30, 90, 70, 90, 90, 10);
ctx.stroke();

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

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

緑色の点が始点です。2 つの青色の点が制御点です。紫色の点が終点です。まず始点から一つ目の制御点に向けて、そして二つ目の制御点から終点に向けて赤色の補助線を引いてみました。ご覧のように、bezierCurveTo() メソッドで描かれるベジェ曲線は、始点と終点に接するような曲線として描かれます。[補助線入りの実際のサンプル]

応用例

三次曲線

bezierCurveTo() メソッドは、先ほどのサンプルのように凸型の曲線を描くだけではなく、波打ったような曲線を描くこともできます。補助線入りの図を上にご用意しました。2つの制御点の場所を工夫すると、さまざまな曲線が描けることがわかるでしょう。

ctx.moveTo(10, 10);
ctx.bezierCurveTo(30, 90, 70, 10, 90, 90);
ctx.stroke();

[bezierCurveTo() メソッドで三次曲線を描く実際のサンプル]

ブラウザ対応状況