Im vorherigen Artikel wurde über die ARC -Methode von Canvas gesprochen, und in diesem Artikel wurde über die damit verbundene ARCTO -Methode gesprochen.
Arc und Arcto sind aus den Namen von ihnen zu sehen. Arcto ist auch eine Methode zum Zeichnen von Kurven, und die Kurve, die er zeichnet, ist auch ein Bogen eines perfekten Kreises. Aber seine Parameter und ARC sind einfach irrelevant ~
ctx.arcto (x1, y1, x2, y2, radius); Die ARCTO -Parameter umfassen zwei Punkte, und es gibt keinen Punkt, der die Mitte des Kreises in diesen beiden Punkten darstellt. Nur der letzte Parameter ist der Radius des Kreises, was darauf hinweist, dass Arcto und der Kreis eine kleine Beziehung haben.
Es gibt nur sehr wenige Artikel über Arcto online, und ich fand schließlich einen, der eine fremde war; Und es gibt kein intuitives Werkzeug für die Zeichnung von Leinwand, sodass ich nur raten kann, dass Arcto mich lange Zeit erraten hat. .
Für eine intuitive Beschreibung habe ich eine Hilfsmethode übernommen: Wo immer Arcto gezeichnet wird, habe ich Lineto verwendet, um die entsprechenden Punkte zu zeichnen, um ihre Beziehung zu sehen. Zeichnen Sie einfach Hilfslinien.
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 ();
Es scheint, dass es viel Code gibt, aber es ist eigentlich sehr einfach. Ich habe mehrere Variablen verwendet, um Koordinatenwerte zu sparen, und der Rest waren Leinwandoperationen.
Variable Beschreibung: x0, y0 ist die Ausgangspunktkoordinate, X1, Y1 ist die erste Punktkoordinate, und X2, Y2 ist die zweite Punktkoordinate. Die von Lineto gezogene gerade Linie ist eine durchscheinende 1px schwarze Linie, und die von ARCTO gezogene Linie ist eine rote 2px -Linie.
Aktualisieren Sie die Seite und Sie sehen das Bild unten.
Ich muss sagen, dass diese rote Linie wie ein Haken aussieht.
Das Gesetz von Arcto wurde also gefunden. Es bildete tatsächlich einen Winkel durch die beiden geraden Linien am Startpunkt, Punkt 1 und Punkt 2, und diese beiden Linien sind auch die Tangentenlinien des Parameterkreises.
Der Radius des Kreises bestimmt, wo der Kreis die Kanten mit der Linie spaltet. Es ist wie ein Ball, der in eine tote Ecke rollt. Je kleiner der Ball, desto mehr rollt er, desto näher kommt er an die tote Ecke. Je größer der Ball ist, ist das Gegenteil wahr.
Dies ist ein sehr ernstes akademisches Problem, also möchte YY nicht.
Lassen Sie uns den Ball größer machen!
ctx.arcto (x1, y1, x2, y2,50); // Der Radius wird auf 50 geändert
Wie in der Abbildung gezeigt, können Sie erkennen, dass der Bogen groß geworden ist und nicht einmal tangential an der geraden Linie ist.
Natürlich sind sie tatsächlich immer noch tangential, weil die Tangente unendlich verlängert ist.
Wir erforschen weiter, wachsen den Kreis weiter und verkürzen den Abstand zwischen dem Startpunkt und dem ersten Punkt.
var x0 = 400; // Die Koordinate des Startpunkts X ändert sich von 100 auf 400
...
ctx.arcto (x1, y1, x2, y2,100); // Der Radius des Kreises wird größer auf 100 und Sie werden eine so seltsame Figur sehen.
Es war ursprünglich ein Haken, aber jetzt wurde es verbogen und in die entgegengesetzte Richtung gedreht! Es ist ein bisschen wie ein Weinflaschenhalter.
Bitte beachten Sie jedoch, dass dieser Kreis immer noch tangential zu den beiden Zeilen ist! Aber jetzt kann die Länge der beiden Linien diesen Kreis nicht befriedigen! Er hat beide Drähte drahtlos erweitert!
Wann wird dieser Hakengriff umgekehrt? Wenn Sie eine gute Geometrie haben, können Sie versuchen, die Tangentengleichungen von Punkten und Kreisen zu verstehen.
Es gibt einen sehr wichtigen Punkt in der Arcto -Methode. Dieser wichtige Punkt ist (x1, y1) im Code. Solange der Abstand vom Tangentenpunkt des Kreises den Abstand vom Startpunkt (x0, y0) überschreitet, wird er umkehren.
Aus der Abbildung können wir sehen, dass sich die Koordinaten dieses Punktes (x2, y2) unendlich ändern können. Solange es immer ein Punkt auf der Tangente ist, ändert sich der von Arcto gezogene Diagramm überhaupt nicht, wenn der Radius des Kreises unverändert bleibt. Dies erfordert besondere Aufmerksamkeit.
Lassen Sie mich mein geometrisches Wissen verwenden, das ich nicht auf den Tisch bringen kann, um diesen Satz zu überprüfen. Aus Gründen der Berechnung änderte ich zunächst den Winkel zwischen den beiden Linien auf 90 Grad.
var x0 = 100,
y0 = 400,
x1 = 500,
y1 = 400,
x2 = 500,
y2 = 450;
Nach der Änderung wird es 90 Grad geöffnet! Wir halten den Radius des Balls unverändert. Nach erfrischend:
Wir machen Y2 größer, dh eine Tangentenlinie, verwandeln sie in 550 und erfrischen:
Die Tangentenlinie wird erweitert, aber die von Arcto gezogene rote Linie hat sich überhaupt nicht geändert.