In diesem Artikel wird hauptsächlich die Beispiele für das Zeichnen von Rechtecken in HTML5 -Leinwand vorgestellt. Dieser Artikel verwendet drei APIs: Fillrect, Strokerect und ClearRect. Freunde, die es brauchen, können sich darauf beziehen.
Dieser Artikel wird von Steve Fulton & Jeff Fulton HTML5 -Leinwand, Kapitel 2, der grundlegenden Rechteckform.
Werfen wir einen Blick auf die einfache geometrische Form, die in Leinwand eingebaut ist - Rechtecke zeichnen. In Leinwand gibt es drei Möglichkeiten, ein Rechteck zu zeichnen: Fillrect, Schlaganfall (Strokerect) und Clearrect. Natürlich können wir auch Wege verwenden, um alle Zahlen einschließlich Rechtecken darzustellen.
Hier sind die APIs für die oben genannten drei Methoden:
1.FillRect (X, Y, Breite, Höhe). Zeichnen Sie ein festes Rechteck aus (x, y), Breite und Höhe.
2.Strokerect (x, y, Breite, Höhe). Zeichnen Sie eine rechteckige Box aus (x, y), Breite und Höhe. Die rechteckige Box wird gemäß dem aktuellen Set -Strokestyle-, Linewidth-, Linejoin- und Miterlimit -Eigenschaften in verschiedene Stile verwandelt.
3.ClearRect (x, y, Breite, Höhe). Löschen Sie den rechteckigen Bereich ab (x, y), Breite und Höhe, wodurch er vollständig transparent ist.
Bevor wir die oben genannte Methode zum Zeichnen von Leinwand aufrufen, müssen wir den Stil der Füllung und den Schlaganfall festlegen. Die grundlegendste Möglichkeit, diese Stile festzulegen, besteht darin, 24-Bit-Farben zu verwenden (gekennzeichnet in hexadezimalen Saiten). Hier ist ein einfaches Beispiel:
Kopieren Sie den Code