Verwenden von Pfaden zum Zeichnen von Bögen in HTML5 Canvas_html5-Tutorial-Techniken

Dieser Artikel ist eine Übersetzung aus Steve Fulton & Jeff Fulton HTML5 Canvas, Kapitel 2, „Erweiterte Pfadmethoden, Bögen“

Beim Canvas-Zeichnen kann „Bogen“ entweder ein vollständiger Kreis oder ein Teil des Umfangs sein.

Code kopieren

Der Code lautet wie folgt:

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

In der obigen Methodenbeschreibung definieren x und y den Mittelpunkt des Kreises und radius definiert den Radius des Kreises Kreis. startAngle und endAngle werden als Polarkoordinatenwerte ausgedrückt. gegen den Uhrzeigersinn (boolesch) definiert die Richtung des Bogens.

Wenn wir beispielsweise einen Kreis mit dem Punkt (100, 100) als Mittelpunkt und einem Radius von 20 zeichnen möchten, können wir den folgenden Code verwenden:

Kopieren Sie den Code

Der Code lautet wie folgt:

context.arc(100, 100, 20, (Math.PI/180)* 0, (Math.PI/180) *360, false);

Der Ausführungseffekt ist:

Es ist erwähnenswert, dass wir im obigen Code den Startwinkel (0) und den Endwinkel (360) durch Multiplikation mit (Math.PI/180) in Polarkoordinaten im Bogenmaß umwandeln müssen. Wenn der Startwinkel 0 und der Endwinkel 360 beträgt, erhalten Sie einen Vollkreis.

Neben Vollkreisen können wir auch Bogensegmente zeichnen. Der folgende Code zeichnet einen Viertelkreis:

Kopieren Sie den Code

Der Code lautet wie folgt:

context.arc(100, 100, 20, (Math.PI/180)*0, (Math.PI/180)*90, false);

Wenn wir zusätzlich zum obigen Bogen weitere drei Viertel des Kreises zeichnen möchten, können wir gegen den Uhrzeigersinn auf true setzen:

Code kopieren

Der Code lautet wie folgt:

context.arc(100, 100, 20, (Math.PI/180)*0, (Math.PI/180)* 90 , wahr);

Übersetzungshinweis 1: Im Canvas-Koordinatensystem ist die Richtung der Y-Achse nach unten gerichtet.

Anmerkung 2: Sie können Bögen auch mit der Methode context.arcTo() zeichnen. Die Beschreibung dieser Methode im Original-HTML5-Canvas-Buch von Steve Fulton und Jeff Fulton ist völlig falsch. Die korrekte Zusammenfassung von arcTo() finden Sie unter: arcTo of Curve .