HTML5のキャンバスを使用して曲線を描画する簡単な方法

この記事では、主に、HTML5キャンバスを使用して曲線を描画する簡単な方法を紹介します。これは、HTML5の紹介の基本的な知識です。それを必要とする友達はそれを参照できます。

Canvas2Dの独自の曲線法

最近、私は3Dソフトボディの計算を研究しているので、知識を追加しています。多くの場合、いくつかの数値分析、主に曲線のさまざまな補間アルゴリズムが含まれます。 Canvas2D自体も、二次およびキューブBAZ曲線を使用して曲線を描くことができることを突然思い出しました。実際、私はまだこの方法を使用していません、今すぐ試してみましょう〜

この記事は単純な曲線図ですので、多くの複雑な原則について話しないでください。その上、BAZ曲線自体の原則は非常に単純です。ウィキペディアを見ることで理解できます。実際、多くの単純な曲線描画ツールはBAZ曲線を使用しています。 Windows独自の描画ツールで曲線を使用している場合は、それらに精通している必要があります。最初に直線をドラッグしてから、特定の位置をクリックして直線をひねることができます。初期ドラッグアクションにより、曲線の2つの頂点が決定され、クリックアクションが中間点を追加します。 Windowsに付属する描画ツールは、Cubic Baz Curvesを使用しており、2つの中間点を追加できます。 BATE曲線は、一般的な多項式補間とは異なります。その中間点は、曲線が通過する必要がある頂点ではなく、制御点としてのみ使用されます。また、閉じた曲線を作成することもできます。 Canvas2Dは、曲線を描く2つの方法を提供します

二次鎖：二次baze曲線

Beziercurveto：キュービックベゼル曲線

線は現在の位置から描画され、現在の位置はMovetoメソッドで指定できます。曲線の開始位置では、中間点とエンド位置も必要です。これらの位置座標を描画関数に渡すだけです。たとえば、二次batez曲線には中間点と末端位置が必要なため、2つの座標を四肢関数に渡す必要があります。座標はxとyで構成されています。つまり、この関数には4つのパラメーターがあります。 Beziercurvetoは同じですが、2つの中間点があることを除いて。今それを使ってみましょう