HTML5-Canvas-Zeichnungs-Tutorial (5) – Bogenmethode zum Zeichnen von Kurven in Canvas_html5-Tutorial-Fähigkeiten

In diesem Artikel Zeichnen von Linien auf Leinwand habe ich darüber gesprochen, wie man gerade Linien zeichnet. Logischerweise hätte dieser Artikel über das Zeichnen von Kurven schon vor langer Zeit veröffentlicht werden sollen, aber da das Zeichnen von Kurven auf Leinwand etwas ganz Besonderes ist, habe ich ihn nicht veröffentlicht. Ich habe es noch nicht herausgefunden, also probieren Sie es Schritt für Schritt aus.
Eine der Schwierigkeiten beim Zeichnen von Kurven auf Leinwand besteht darin, dass es nur 4 Funktionen für Kurven gibt! Dies sind arc, arcTo, quadraticCurveTo und bezierCurveTo. Beginnen wir mit der einfachsten arc-Methode.
Die Funktion von arc besteht darin, einen regelmäßigen Bogen zu zeichnen, der ein vollständiger Kreis oder ein bestimmter Kreisbogen sein kann. Die Syntax für arc lautet wie folgt: 🎜>

context.arc(x, y, radius, startAngle, endAngle, anticlock)
Ich werde seine Parameter erklären, d. h.
Bogen(Kreismittelpunkt x, Kreismittelpunkt y, Radius, Startwinkel, Endwinkel, gegen den Uhrzeigersinn oder nicht)

Was sollen wir tun, wenn wir einen Bogen verwenden, um einen vollständigen Kreis zu zeichnen? Jeder hat bemerkt, dass es in den Parametern einen Startwinkel und einen Endwinkel gibt. Wenn unser Startwinkel 0 und der Endwinkel 360 beträgt, ist das dann nicht ein perfekter Kreis?

Richtige Antwort! Es ist jedoch zu beachten, dass der Winkel hier im „Bogenmaß“ ausgedrückt wird (dasselbe gilt für Flash. Ein vollständiger Kreis beträgt 360 Grad, also 2PI Bogenmaß). Also schreiben wir so:

Kopieren Sie den Code


Der Code ist wie folgt:


ctx.arc(400,400,20,0,Math.PI*2); ctx.fill(); >
Wie lineTo ist auch arc ein Zeichenpfad, daher müssen wir die Fill- oder Stroke-Methode dahinter aufrufen, um die Grafiken anzuzeigen (im Bild werden roter StrokeStyle und durchscheinender roter FillStyle verwendet).

Jetzt zeichnen wir einen Viertelkreis, der Winkel beträgt 90 Grad. Wie bereits erwähnt, beträgt ein 360-Grad-Winkel 2PI Bogenmaß, also ist ein Ein-Grad-Winkel 2PI/360=PI/180 Bogenmaß, dann sind 90 Grad 2PI/360*90=PI/2 Bogenmaß (andere Winkel berechnen Sie bitte selbst ).

Code kopieren


Der Code lautet wie folgt:

ctx.arc(400,400, 20,0 ,Math.PI*2/4);

Aus der Abbildung können wir ermitteln, dass 0 Bogengrad 0 Grad sind, die üblicherweise in der Mathematik verwendet werden , aber der Winkel ist standardmäßig auf Der Stundenzeiger ist geöffnet, was dem mathematischen Modell entgegengesetzt ist (es hängt mit den Koordinaten zusammen, da die Leinwandkoordinaten auch den mathematischen Koordinaten entgegengesetzt sind).

Aber gibt es vorne nicht einen Parameter, der bestimmt, ob es gegen den Uhrzeigersinn ist? Wie wäre es, wenn wir es auf true setzen?

Code kopieren

Der Code lautet wie folgt:

ctx.arc(400,400, 20,0 ,Math.PI*2/4,true);




Sie werden sehen, dass der Winkel gegen den Uhrzeigersinn wird, wodurch der Bogen 360 -90 wird =270 Grad.

Aber! Eine Sache, auf die jeder achten sollte, ist, dass die Berechnungsmethode für den Startpunkt und den Endpunkt immer bei 0 Grad beginnt und sich im Uhrzeigersinn erstreckt. Vorwärts und Rückwärts gibt es nicht. Im Uhrzeigersinn und gegen den Uhrzeigersinn sind nur die Richtungen, in denen Bögen gezeichnet werden.

Das verhindert nicht nur, dass es zu Verwirrung kommt, sondern erleichtert auch die Berechnung. Allerdings kann eine flexible Verwendung gegen den Uhrzeigersinn manchmal sinnvoll sein. Im obigen Beispiel sind unsere Startwinkel alle 0. Versuchen wir es nun mit anderen Startwinkeln, beispielsweise 90 Grad.

Code kopieren

Der Code lautet wie folgt:

ctx.arc(400,400, 20,Math .PI*2/4,Math.PI*2 Math.PI);


Wenn unser Startpunkt 90 Grad ist und der Endpunkt ebenfalls 90 Grad ist, ist das Ergebnis, dass nichts kann gezeichnet werden, also habe ich den Endpunkt gesetzt. Der Winkel wurde auf 180 Grad geändert und schließlich wurde die folgende Grafik erhalten.

Frage: Wenn wir einen vollständigen Kreis von einem anderen Startpunkt als 0 Grad zeichnen, ist das in Ordnung? Natürlich ist das möglich, solange Sie den Endpunkt des Bogens auf den 360-Grad-Startwinkel einstellen, wie zum Beispiel:

Code kopieren

Code wie folgt:

ctx.arc(400,400,20,Math.PI*2/4,Math.PI*2 Math.PI*2/4); / /Der Startpunkt ist 90 Grad, der Endpunkt ist 360 90 Grad

Dieser Ansatz ist jedoch nur auf der Suche nach Ärger und normale Menschen würden ihn nicht verwenden.
Zusammenfassung: Die Bogenmethode von Canvas ist eine Möglichkeit, einen positiven Bogen zu zeichnen und keine anderen seltsamen Bögen, wie z. B. eine S-Form, zu zeichnen – obwohl mir S am besten gefällt -förmig.