In dem Artikel über Canvas -Zeichnen von Linien sprach ich über die Methode, gerade Linien zu zeichnen. Dieser Artikel über Zeichnungskurven hätte vor langer Zeit veröffentlicht werden sollen, aber da Leinwandzeichnungskurven etwas Besonderes sind, habe ich sie noch nicht herausgefunden, also muss ich sie Schritt für Schritt versuchen.
Eine der Schwierigkeiten beim Zeichnen von Kurven in Leinwand ist, dass es 4 Funktionen von Kurven hat! Sie sind Arc, Arcto, quadratisches Curveto, Beziercurveto. Lassen Sie mich mit der einfachsten ARC -Methode beginnen.
Die Funktion des Bogens besteht darin, einen regulären Bogen zu zeichnen, der ein vollständiger Kreis oder ein bestimmter Bogen eines Kreises sein kann.
Die Syntax von ARC lautet wie folgt :context.arc (x, y, radius, Startangle, Endangle, gegen den Gegenwart)
Ich werde seine Parameter erklären, das heißt
ARC (Mitte X, Mitte Y, Radius, Startwinkel, Endwinkel oder ob es gegen den Uhrzeigersinn ist)
Was sollen wir tun, wenn wir einen kompletten Kreis mit ARC zeichnen? Jeder bemerkte, dass es einen Startwinkel und einen Endwinkel in den Parametern gibt. Wenn unser Startwinkel 0 beträgt und der Endwinkel 360 beträgt, ist es dann nicht ein perfekter Kreis?
Richtige Lösung! Es ist jedoch zu beachten, dass der Winkel hier durch Radians dargestellt wird (und auch Blitz). Ein vollständiger Kreis beträgt 360 Grad, was 2PI -Radiant ist.
Also schreiben wir das :ctx.arc (400.400,20,0, math.pi*2);
ctx.fill ();
ctx.stroke ();
Wie bei Lineto ist auch ARC ein Weg zum Zeichnen, daher müssen wir die Füll- oder Schlaganfallmethode dahinter aufrufen, um die Figur anzuzeigen (der rote Strokstil und die durchscheinende rote Füllung werden in der Abbildung verwendet).
Ziehen wir nun einen 1/4 -Kreis, der Winkel beträgt 90 Grad. Wie bereits erwähnt, beträgt der Winkel von 360 Grad 2PI -Radianer, dann beträgt der Winkel von 10 Grad 2pi/360 = PI/180 Radians, dann 90 Grad 2PI/360*90 = PI/2 Radiants (bitte berechnen Sie andere Winkel selbst).
ctx.arc (400.400,20,0, math.pi*2/4);
Aus der Abbildung können wir feststellen, dass der 0 -Bogengrad der häufig verwendeten 0 Grad in Mathematik ist, der Winkel standardmäßig im Uhrzeigersinn geöffnet wird, was dem mathematischen Modell entgegengesetzt ist (im Zusammenhang mit den Koordinaten, da die Canvas -Koordinaten auch den mathematischen Koordinaten entgegengesetzt sind).
Aber gibt es keinen Parameter davor, der bestimmt, ob er gegen den Uhrzeigersinn ist? Wie wäre es, wenn wir ihn auf wahr machen?
ctx.arc (400.400,20,0, math.pi*2/4, true);
Sie werden sehen, dass der Winkel gegen den Uhrzeigersinn wird, was dazu führt, dass der Bogen 360-90 = 270 Grad wird.
Aber! Eine Sache, auf die Sie achten sollten, ist, dass die Berechnungsmethode des Startpunkts und der Endpunkt immer auf 0 Grad basiert und sich im Uhrzeigersinn erstreckt, und es gibt kein Sprichwort, dass das Cisco und das Gegenteil wahr sind. Der gegen den Uhrzeigersinn ist genau die Richtung des Bogens.
Dies verhindert nicht nur, dass Verwirrung hin und her geht, sondern es auch leichter zu berechnen.
Die flexible Verwendung von gegen den Uhrzeigersinn ist jedoch manchmal nützlich.
Im obigen Beispiel beträgt unser Startwinkel 0. Jetzt versuchen wir andere Startwinkel wie 90 Grad.
ctx.arc (400.400,20, math.pi*2/4, math.pi*2+math.pi);
Wenn unser Ausgangspunkt 90 Grad beträgt und der Endpunkt 90 Grad beträgt, kann das Ergebnis nichts gezogen werden, sodass ich den Endpunktwinkel auf 180 Grad geändert habe und schließlich die Figur in der folgenden Abbildung erhalten habe.
Frage : Wenn wir einen vollständigen Kreis von einem Startpunkt ohne 0 Grad zeichnen, ist es dann in Ordnung? Natürlich ist es auch möglich, solange Sie den Endpunkt des Bogens auf 360 Grad + den Startwinkel festlegen, wie z. B.:ctx.arc (400.400,20, math.pi*2/4, math.pi*2+math.pi*2/4); // Der Startpunkt beträgt 90 Grad, der Endpunkt beträgt 360+90 Grad
Dieser Ansatz ist jedoch nur eine Frage der Schwierigkeiten ohne Probleme, und normale Menschen werden ihn nicht verwenden.
Zusammenfassung : Die ARC-Methode von Canvas besteht darin, regelmäßige Bögen zu zeichnen, und Sie können nur reguläre Bögen zeichnen, und Sie können keine anderen seltsamen Bögen zeichnen, wie z.