html5 Canvas 描画チュートリアル (8) — Canvas_html5 で曲線を描画するための bezierCurveTo メソッド チュートリアル スキル

前回の記事では、キャンバスに曲線を描画する 3 つの方法、arc、arcTo、quadraticCurveTo について説明しました。これらには共通点があります。今日説明する bezierCurveTo とそれらの最大の違いは、制御点が 2 つあることです。つまり、S 字型の曲線を描くことができます。

bezierCurveTo はベジェ曲線としても知られており、特定の描画ツールを学習していればすぐに理解できます。
bezierCurveTo の構文は次のとおりです:
ctx.bezierCurveTo(x1,y1,x2,y2,x,y); いつものようにパラメータを説明します。 is は制御点 1 の座標、(x2, y2) は制御点 2 の座標、(x, y) はその終点の座標です。 quadraticCurveTo と同様に、その始点座標も moveTo によって事前に設定されます。

したがって、bezierCurveTo が曲線を描くには、始点、終点、制御点 1、制御点 2 の 4 つの点が必要です。以降の説明のために、ここでは制御点 1 が始点に対応すると仮定します。 、コントロール ポイント 2 はエンド ポイントに対応します
ここで、キャンバス描画の古い問題について再度言及する必要があります。つまり、コード描画はすべて推測に基づいており、どこに描画するかを知るために更新する必要があります。

以前からの良い伝統を継承し、誰もが理解できるように補助線をいくつか引きます:

コードをコピー

コードは次のとおりです。

var x1=450, //制御点 1 の x 座標
y1 = 300, //制御点 1 の y
x2 = 450, // 制御点 2 の x
y2 = 500, // 制御点 2 の y
x = 300, // 終点 x
y = 500; // 終点 y
; ctx.moveTo(300,300) ;//開始点
ctx.beginPath();
ctx.lineWidth = 5;
ctx.ストロークスタイル = "rgba(0,0,0,1)"
ctx.moveTo(300,300) ;
ctx.bezierCurveTo(x1,y1,x2,y2,x,y);
ctx.ストローク()
ctx .beginPath();
ctx.bloodStyle = "rgba(255,0,0,0.5)";
ctx.lineWidth = 1
// 始点と制御点 1 を接続します。 ctx.moveTo(300,300);
ctx.lineTo(x1,y1);
// 終点と制御点 2 を接続します
ctx.moveTo(x2,y2); (x,y);
// 始点と終点を接続します (ベースライン)
ctx.lineTo(x,y); );

ここでは、まず、quadraticCurveTo に似た、片側にのみ傾いた曲線を描きます。制御点 1 と 2 の x 座標が同じであるため、この線は「滑らか」に見えます。
次に、別の S 字曲線を描いて、bezierCurveTo が異なることを証明します。

コードをコピーします

コードは次のようになります。 var x1 = 150 ...

実際には、制御点 1 の座標を変更するだけです。コントロール ポイント 1 とコントロール ポイント 2 の座標がベースラインの両側にある場合は、S 字型の曲線が描画されます。両方がベースラインの片側にある場合は、quadraticCurveTo と同様の効果があります。
この例の状況は比較的単純です (始点から終点までの) ベースラインは垂直ですが、実際のアプリケーションでは、ほとんどの場合、ベースラインは傾いており、状況はさらに複雑です。 。でも、自分で試してみてください

各描画メソッドは比較的単一の機能を備えているように見えますが、強力なメソッドは個々のメソッドの組み合わせです。以降の記事では、角丸長方形や楕円などの従来のグラフィックを描画する方法を説明します。これらの描画には、これらの単一の方法を組み合わせる必要があります。