Canvas-Studiennotizen: Einfache Pfade zeichnen

Allgemeine Schritte zum Zeichnen von Liniensegmenten:

moveTo(x,y) bewegt den Pinsel zum angegebenen Koordinatenpunkt (x,y)

lineTo(x,y) verwendet eine gerade Linie, um den aktuellen Endpunkt und den angegebenen Koordinatenpunkt (x,y) zu verbinden.

Stroke() zeichnet den aktuellen oder vorhandenen Pfad entsprechend dem aktuellen Strichzeichnungsstil

Allgemeine Schritte zum Zeichnen eines rechteckigen Pfads:

rect(x, y, width, height) rechteckiger Pfad, Koordinatenpunkt (x, y), Breite Höhe

Stroke() oder Fill zeichnet oder füllt den Pfad entsprechend dem aktuellen Stil

Sie können auch das oben erwähnte StrokeRect oder FillRect verwenden oder es über lineTo zu einem Rechteck zusammenfügen.

Schauen wir uns zunächst die API zum Zeichnen von Bögen an:

ctx.arc(x, y, radius, startAngle, endAngle, gegen den Uhrzeigersinn);

x, y Bogenmitte, Radius Bogenradius, startAngle Startpunkt, endAngle Bogenendpunkt, gegen den Uhrzeigersinn, standardmäßig im Uhrzeigersinn, true gegen den Uhrzeigersinn

Alle Drehungen in CSS verwenden Winkel (Grad), aber die Einheit, mit der Winkel in der Bogenfunktion ausgedrückt werden, ist Bogenmaß, nicht Winkel. JS-Ausdrücke für Winkel und Bogenmaß: Bogenmaß = (Math.PI/180) * Winkel (Grad).

Das Bogenmaß wird hier standardmäßig basierend auf der positiven Richtung der x-Achse und dem Winkel der Drehung im Uhrzeigersinn berechnet.

Illustration:

(Bild aus der Wüste)

 ctx.beginPath();ctx.arc(200, 100, 100, 0, Math.PI / 2, false);ctx.closePath();ctx.Stroke();ctx.fill();

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.