html5キャンバス描画チュートリアル（8） - キャンバスで曲線を描くためのBeziercurvetoメソッド

コメント：ARC、ARCTO、QuadraticCurveto。それらにはすべて、共通点が1つあります。つまり、描く曲線は片側にのみ偏っています。今日言及されたBeziercurvetoの最大の違いは、2つの制御ポイントです。つまり、S字型曲線を描画できます。興味のある友達はそれについて学ぶことができます。

いわゆるベジエカーブであるBeziercurvetoは、いくつかの描画ツールを学んだ場合、すぐにそれを理解できます。

Beziercurvetoの構文は次のとおりです。

ctx.beziercurveto（x1、y1、x2、y2、x、y）;いつものように彼のパラメーターを説明します。 （x1、y1）は制御点1の座標であり、（x2、y2）は制御点2の座標、（x、y）はそのエンドポイントの座標です。 QuadraticCurvetoのように、その出発点座標もMovetoによって事前に設定されています。

したがって、Beziercurveto描画曲線には4ポイントが必要です。出発点、エンドポイント、コントロールポイント1、コントロールポイント2。その後の説明のために、コントロールポイント1は開始点に対応し、コントロールポイント2はエンドポイントに対応すると仮定します。

ここでは、Canvas Drawingの古い問題について言及します。つまり、コード描画はすべて推測に基づいていることを意味します。

私は以前の素晴らしい伝統を続け、誰もが理解するのを助けるためにいくつかの補助線を描きます：

var x1 = 450、//制御点のx座標1

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.strokestyle = "rgba（0,0,0,1）"

ctx.moveto（300,300）;

ctx.beziercurveto（x1、y1、x2、y2、x、y）;

ctx.stroke（）;

//補助線の描画を開始します

ctx.beginpath（）;

ctx.strokestyle = "rgba（255,0,0,0.5）";

ctx.linewidth = 1;

//開始点と制御ポイント1を接続します

ctx.moveto（300,300）;

ctx.lineto（x1、y1）;

//エンドポイントとコントロールポイント2を接続します

ctx.moveto（x2、y2）;

ctx.lineto（x、y）;

//開始点とエンドポイントを接続する（ベースライン）

ctx.moveto（300,300）;

ctx.lineto（x、y）;

ctx.stroke（）;

ここでは、最初に四肢に偏っている四分子型に似た曲線を描きます。制御ポイント1と2のx座標が同じであるため、この行は比較的丸いように見えます。

ここで、S字型の曲線を描いて、Beziercurvetoがユニークであることを証明します。

var x1 = 150;

...

実際、制御ポイント1の座標を変更するだけです。コントロールポイント1と制御点2の座標がベースラインの両側にそれぞれある場合、S字型曲線が描画されます。両方がベースラインの片側にある場合、それは四角形と同様の効果です。

この例の状況は比較的簡単です。ベースライン（出発点からエンドポイント）は垂直ですが、ほとんどの場合、実際のアプリケーションではベースラインは斜めであるため、状況ははるかに複雑です。しかし、自分で試してみましょう

各描画方法は機能が比較的単一に見えますが、強力な方法は単一の方法で組み合わされます。その後の記事では、丸みを帯びた長方形や楕円などのいくつかの一般的な描画方法を説明しようとしました。彼らは過去にこれらの単一の方法を組み合わせる必要がありました。