Beispiele für das Zeichnen von Rechtecken in HTML5 Canvas_html5 Tutorial-Tipps

Dieser Artikel ist eine Übersetzung aus Steve Fulton & Jeff Fulton HTML5 Canvas, Kapitel 2, „Die grundlegende Rechteckform“.

Werfen wir einen Blick auf die einfache geometrische Form, die in Canvas integriert ist – die Zeichnung eines Rechtecks. In Canvas gibt es drei Möglichkeiten, ein Rechteck zu zeichnen: füllen (fillRect), Strich (StrokeRect) und löschen (clearRect). Natürlich können wir mit „Pfad“ auch alle Grafiken beschreiben, auch Rechtecke.

Im Folgenden sind die APIs der oben genannten drei Methoden aufgeführt:

1.fillRect(x,y,width,height). Zeichnen Sie ein ausgefülltes Rechteck beginnend bei (x, y) mit der Breite Breite und der Höhe Höhe.
2.strokeRect(x,y,width,height). Zeichnen Sie ausgehend von (x, y) einen rechteckigen Kasten mit der Breite als Breite und der Höhe als Höhe. Das rechteckige Feld wird in verschiedenen Stilen gerendert, je nach den aktuell eingestellten Eigenschaften StrokeStyle, LineWidth, LineJoin und MiterLimit.
3.clearRect(x,y,width,height). Löschen Sie den rechteckigen Bereich beginnend bei (x, y) mit Breite, Breite und Höhe, um ihn vollständig transparent zu machen.

Bevor wir die obige Methode zum Zeichnen der Leinwand aufrufen, müssen wir die Füll- und Strichstile festlegen. Die einfachste Möglichkeit, diese Stile festzulegen, ist die Verwendung von 24-Bit-Farben (dargestellt als Hexadezimalzeichenfolgen). Das Folgende ist ein einfaches Beispiel:

Kopieren Sie den Code

Der Code lautet wie folgt:

context.fillStyle = "#000000";
context.StrokeStyle = "#ff00ff";

Im folgenden Beispiel ist die Füllfarbe auf Schwarz und die Strichfarbe eingestellt zu Lila:

Code kopieren

Der Code lautet wie folgt:

Funktion drawScreen( ) {
context.fillStyle = "#000000";
context.StrokeStyle = "#ff00ff";
context.lineWidth = 2;
context.fillRect(10, 10, 40, 40) ;
context .StrokeRect(0, 0, 60, 60);
context.clearRect(20, 20, 20, 20);
}

Das Ergebnis der Codeausführung ist wie unten gezeigt: