コメント:アークとアークはそれらの名前から見ることができます。 Arctoは曲線を描く方法でもあり、彼が描く曲線も完全な円の弧です。しかし、彼のパラメーターとアークは単に報告できない〜興味のある友人はそれについて学ぶことができます。次に、ARCTOメソッドのアプリケーションを詳細に紹介しましょう。
前の記事では、キャンバスのARC法について説明し、この記事ではそれに関連するARCTO法について説明しました。アークとアークはそれらの名前から見ることができます。 Arctoは曲線を描く方法でもあり、彼が描く曲線も完全な円の弧です。しかし、彼のパラメーターとアークは単に無関係です〜
ctx.arcto(x1、y1、x2、y2、radius); ARCTOパラメーターには2つのポイントが含まれており、これらの2つのポイントは円の中心を表していません。最後のパラメーターのみが円の半径であり、ARCTOと円の関係が少しあることを示しています。
Arcto Onlineに関する記事はほとんどありません。ついにそのうちの1つが外国人であることがわかりました。そして、キャンバスの描画に直感的なツールはないので、私は推測することしかできません。Arctoは私に長い間推測させました。 。
直感的な説明のために、私は補助的な方法を取りました。Arctoが描かれたところならどこでも、Linetoを使用して対応するポイントを描画して彼らの関係を確認しました。補助線を描くだけです。
var x0 = 100、
y0 = 400、
x1 = 500、
Y1 = 400、
x2 = 450、
Y2 = 450;
ctx.beginpath();
ctx.moveto(x0、y0);
ctx.strokestyle = "#f00";
ctx.linewidth = 2;
ctx.arcto(x1、y1、x2、y2,20);
ctx.stroke();
ctx.beginpath();
ctx.strokestyle = "rgba(0,0,0,0.5)";
ctx.linewidth = 1;
ctx.moveto(x0、y0);
ctx.lineto(x1、y1);
ctx.filltext( 'x1、y1'、x1+10、y1+10)
ctx.lineto(x2、y2);
ctx.filltext( 'x2、y2'、x2+10、y2)
ctx.stroke();
多くのコードがあるようですが、実際には非常に簡単です。座標値を保存するためにいくつかの変数を使用しましたが、残りはCanvas操作でした。
変数説明:x0、y0は出発点座標、x1、y1が最初のポイント座標であり、x2、y2は2番目のポイント座標です。 Linetoによって描かれた直線は、半透明の1pxブラックラインであり、Arctoによって描かれたラインは2pxの赤い線です。
ページを更新すると、下の写真が表示されます。
この赤い線はフックのように見えると言わざるを得ません。
したがって、アークの法則が見つかりました。実際には、開始点、ポイント1とポイント2の2つの直線を通る角度を形成し、これらの2つの線もパラメーター円の接線線です。
円の半径は、円が線でエッジを切断する場所を決定します。死んだコーナーにボールが転がるようなものです。ボールが小さくなればなるほど、ロールインするほど、死んだコーナーに近づきます。ボールが大きいほど、反対が真実です。
これは非常に深刻な学問的な問題なので、YYを望んでいません。
ボールを大きくしましょう!
ctx.arcto(x1、y1、x2、y2,50); //半径は50に変更されます
図に示されているように、アークは大きくなり、直線に接していないことがわかります。
もちろん、接線が無限に拡張されているため、実際にはまだ接線です。
私たちは引き続き探索し、円を育て続け、出発点と最初のポイントの間の距離を短くします。
var x0 = 400; //開始点x座標は100から400に変更されます
...
ctx.arcto(x1、y1、x2、y2,100); //円の半径は100まで大きくなり、そのような奇妙な人物が表示されます。
もともとはフックでしたが、今では曲がって反対方向に向けられています!ワインボトルホルダーのようなものです。ただし、この円はまだ2行に接していることに注意してください!しかし、今では2本の線の長さはこの円を満たすことができません!彼は両方のワイヤーをワイヤレスで拡張しました!
このフックハンドルはいつ逆になりますか?良いジオメトリがある場合は、ポイントと円の接線方程式を理解してみてください。
ARCTOメソッドには非常に重要なポイントがあります。この重要なポイントは、コードの(x1、y1)です。それから円の接線点までの距離が、そこから出発点(x0、y0)までの距離を超える限り、逆になります。
図から、この点(x2、y2)の座標が無限に変化する可能性があることがわかります。それが常に接線線のポイントである限り、円の半径が変更されていない場合、ARCTOによって描かれたグラフはまったく変化しません。これには特別な注意が必要です。
この命題を検証するためにテーブルに乗ることができない幾何学的な知識を使ってみましょう。計算のために、最初に2行の角度を90度に変更しました。
var x0 = 100、
y0 = 400、
x1 = 500、
Y1 = 400、
x2 = 500、
Y2 = 450;
変更後、90度開かれます!ボールの半径を変更せずに保ちます。リフレッシュ後:
Y2を大きくします。つまり、接線線を伸ばし、550に変えてリフレッシュします。
接線線は拡張されていますが、Arctoによって描かれた赤い線はまったく変わっていません。