HTML5 zeichnet komplexe Formen auf der Leinwand mit Screenshots der Tutorial-Fähigkeiten von effects_html5

1. Zeichnen Sie komplexe Formen oder Pfade

Wenn ein einfaches Rechteck die Anforderungen nicht erfüllen kann, bietet die Zeichenumgebung die folgenden Methoden zum Zeichnen komplexer Formen oder Pfade.

beginPath(): Beginnen Sie mit dem Zeichnen eines neuen Pfads.
closePath(): Schließt die Form, indem ein Liniensegment vom aktuellen Punkt zum Startpunkt des Pfads gezeichnet wird.
fill(), Stroke(): Füllen Sie eine Form oder zeichnen Sie eine hohle Form.
moveTo(): ​​​​Bewegen Sie den aktuellen Punkt zu Punkt (x, y).
lineTo(): ​​​​Zeichnen Sie eine gerade Linie vom aktuellen Punkt zum Punkt (x, y).
arc(x,y,r,sAngle,eAngle,gegen den Uhrzeigersinn): Zeichnen Sie einen Bogen mit einem angegebenen Radius zum Punkt (x,y).

2. Um komplexe Formen mit diesen Methoden zu zeichnen, müssen Sie die folgenden Schritte ausführen:

Verwenden Sie die beginPath()-Methode, um mit dem Zeichnen des Pfads zu beginnen.
Verwenden Sie die Methoden moveTo(), lineTo(), arc(), um Liniensegmente zu erstellen.
Verwenden Sie closePath(), um das Zeichnen zu beenden und die Form zu schließen (optional).
Verwenden Sie „Stroke()“ oder „Fill()“, um den äußeren Rand oder die Füllform des Pfads zu zeichnen. Durch die Verwendung von fill() werden automatisch alle nicht geschlossenen Pfade geschlossen.

3. Arc() Zeichenanweisungen


4. Zeichnen komplexer Formen auf Leinwand

Code kopieren

Der Code lautet wie folgt:

Tipps: Ihr Browser unterstützt kein 🎜>


5. Zeicheneffekt