Vorläufige Studiennotizen zu Html5 Canvas (2) – Ausführliche Zeichnung

Im vorherigen Artikel wurden im Wesentlichen die Grundkonzepte von Html5-Canvas vorgestellt. Für die meisten Studien habe ich j2me und Für Programmierer, die mit der Leinwand von Android zeichnen, ist es nicht schwer, die Leinwand von Html5 zu verstehen. In diesem Artikel wird der Inhalt des vorherigen Artikels fortgesetzt und Methoden zum Zeichnen von geraden Linien, Bögen usw. erläutert. Zunächst erklären wir, wie man eine gerade Linie zeichnet:

Hier verwenden wir beginPath

und

closePath repräsentieren den Startpfad bzw. den Endpfad mit den verschiedenen Knoten des Pfad in der Mitte, moveTo Der Parameter von ist die Startpunktkoordinate und der Parameter von lineTo ist der Endpunkt des gezeichnetes Liniensegment. Auf diese Weise haben wir einen Abschnitt des Pfades fertiggestellt, aber beachten Sie, dass wir die Zeichnung noch nicht fertiggestellt haben. Der Fokus liegt auf dem folgenden Satz: Strich ist eine hohle Zeichnung, FüllungEs ist eine feste Füllung. Es ist zu beachten, dass die Verwendung von fill für Liniensegmente keine Auswirkung hat. Verwenden Sie beginPath, closePath, moveTo, lineTo Diese Funktionen können nicht nur gerade Linien, sondern auch Dreiecke und Rechtecke zeichnen. Das erste ist der Code für Blumendreiecke:

Dieser Code verbindet drei Punkte zu einem Dreieck. Der folgende Code verbindet vier Punkte zu einem Viereck:

Die Wirkung der beiden Codeteile ist wie folgt:

Die Im Folgenden finden Sie den Code zum Zeichnen eines Bogens:

Andere Orte unterscheiden sich nicht von den oben genannten, der Schlüssel ist

Bogen

Die Parameter der Funktion sind jeweils die Abszissenkoordinate des Kreismittelpunkts, die Ordinate des Kreismittelpunkts, der Kreisradius, der Startwinkel (Bogenmaß), der Winkel des gezeichneten Bogens (Bogenmaß), und wenn der letzte boolesche Parameter

falsch ist, bedeutet im Uhrzeigersinn, wahr bedeutet gegen den Uhrzeigersinn, und Der Startwinkel ist der Winkel zwischen der Startseite und der Horizontalen. Die Idee ist, dass sich die Startkante im Uhrzeigersinn um die horizontale Position dreht. context.arc(400,100,60,Math.PI/18,Math.PI,false); Die Wirkung von :

context.arc(400,100,60,Math.PI/18,Math.PI,true); Die Wirkung von

:

Das Obige ist der Inhalt von Html5 Canvas Preliminary Study Notes (2) – Ausführliche Zeichnung. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (). www.php.cn)!