キャンバスで曲線を描く方法について説明し続けましょう。今日はQuadraticcurvetoについて話します。
正直に言うと、この方法は少し怖いので、最初に関数の名前から体験できます。ちなみに、この関数名を短縮する必要があると思います。
二次とは、二次、つまり数学における二次二次方程式を意味します。 CTX.QuadraticCurvetoのパラメーターは次のとおりです。
ctx.QuadraticCurveto（x1、y1、x、y）;
ここで、xとyはエンドポイントの座標、x1とy1は曲線制御点の座標ですか？何？あなたは私に出発点はどこにあるのかと尋ねます。出発点は、この前にMovetoを使用して決定されます。
コントロールポイントの座標をシリアル番号1に配置する理由は、後に言及された描画曲線の関数にはX2とY2の2つの制御ポイントがあるため、最初に予防接種を行います。
Movetoによって決定される出発点と、四分子性自体によって決定されるエンドポイントは、直線に接続できます。 QuadraticCurvetoには1つの制御ポイントしかないため、この制御点はラインの左側またはラインの右側にあるため、四角形は弧を描くことができますが、S字型線を描くことはできません。
簡単に理解するために、前の記事で補助線を描画する方法を引き続き使用します。予備コードは次のとおりです。
var x1 = 350、
Y1 = 250、
x = 400、
y = 500;
ctx.beginpath（）;
ctx.strokestyle = "＃000";
ctx.moveto（300,300）; //起動点
ctx.QuadraticCurveto（x1、y1、x、y）; //実際の曲線
ctx.stroke（）;
ctx.beginpath（）;
ctx.strokestyle = "rgba（255,0,0,0.5）";
ctx.moveto（300,300）;
ctx.lineto（x1、y1）; //この行と次の行は、制御ポイントを描く線です
ctx.lineto（x、y）;
ctx.moveto（300,300）; //曲線の開始点とエンドポイントの開始点とエンドポイント
ctx.lineto（x、y）;
ctx.stroke（）;
ここでは、2つの補助線を描画しました。1つは開始点とエンドポイントの間の接続ライン、もう1つは開始点とコントロールポイントとエンドポイントまでの補助線です（実際には2つ）。これらの2つの線の交差点は、四角形のコントロールポイント座標です。
四角形はアークでのみ曲線を描くことができますが、このアークは非常に不規則である可能性があり、これはアークやアークと比較して改善されています。
さらに、QuadraticCurvetoにはARCTOのような逆転はありません。
もちろん、コントロールポイントを非常に遠くに引っ張ると、グラフィックスは認識できなくなる場合があります。試してみましょう：
Y1 = 950;
Y1を少し大きく変更したばかりで、曲線はキャンバスの範囲を超えました。
ただし、QuadraticCurvetoによって描かれた曲線の範囲は、制御点の座標に到達またはそれを超えることはできません。コントロールポイントをうまく制御する必要があるため、心配する必要はありません。
私は、あなたがあなたの理解を深めるのを助けることを望んで、四肢curvetoで曲線を描くプロセスを示す簡単な移動例ページを書きました。
コードが醜いと書かれている場合は、もっと包括的にしてください。