Graphiken - Rechtecke

Es lassen sich recht einfach Formen erstellen.

Rechtecke werden mit dem Befehl rect erstelle.

context.rect(x, y, width, height)

x: Die x - Koordinate der linken oberen Ecke des Rechtecks

y: Die y - Koordinate der linken oberen Ecke des Rechtecks

width: Die Breite des Rechtecks in Pixeln

height: Die Höhe des Rechtecks in Pixeln

Mit dem Befehl ctx.rect(20, 20, 150, 110) wird ein Rechteck der Breite 150 und der Höhe 110 Pixel gezeichnet

Natürlich kann man die Farbe und die Linienstärke des Rechtecks verändern

Hierzu gibt es den Befehl ctx.strokeStyle = "green", um die Linenfarbe z. B. grün zu zeichnen

Hierzu gibt es den Befehl ctx.lineWidth = "4", um die Linienstärke zu ändern

Denke daran, wenn Du unterschiedlich aussehende Rechtecke zeichnen möchtest, diese mit dem Befehl ctx.beginPath() beginnen zu lassen.

Video

Aufgaben

1. Zeichne ein beliebiges Rechteck.

2. Zeichne ein Rechteck, das 200 Pixel breit und 50 Pixel hoch ist

3. Zeichne ein beliebiges Quadrat

4. Zeichne ein beliebieges rotes Rechteck mit der Linienstärke 2

5. Zeichne 2 beliebige Rechtecke. Das erste soll blau und 3 Pixel stark sein. Das zweite soll gelb und 9 Pixel stark sein