Einfache Formen im Canvas

Wenn wir an einfache Formen denken, schießen einen gleich Wörter wie Quadrate, Rechtecke, Dreiecke und Kreise in den Kopf. Auf Rauten oder Trapeze sind uns noch aus dem Geometrieunterricht der Schulzeit geläufig. All diese Formen können wir selbstverständlich in unserem Canvas abbilden, jedoch gibt es lediglich für das Rechteck eine Funktion. Alle anderen Formen müssen wir mithilfe von Pfaden rendern.

Für rechteckige Formen stehen uns gleich drei Methoden zur Verfügung:

MethodeParameterBeschreibung
fillRect( x, y, width, height )x: Gibt die X-Koordinate der oberen-linken Ecke des Rechtecks an.

y: Gibt die Y-Koordinate der oberen-linken Ecke des Rechtecks an.

width: Gibt die Breite des Rechtecks an.

height: Gibt die Höhe des Rechtecks an.

Zeichnet ein gefülltes Rechteck.
strokeRect( x, y, width, height )x: Gibt die X-Koordinate der oberen-linken Ecke des Rechtecks an.

y: Gibt die Y-Koordinate der oberen-linken Ecke des Rechtecks an.

width: Gibt die Breite des Rechtecks an.

height: Gibt die Höhe des Rechtecks an.

Zeichnet den Rahmen eines Rechtecks.
clearRect( x, y, width, height )x: Gibt die X-Koordinate der oberen-linken Ecke des Rechtecks an.

y: Gibt die Y-Koordinate der oberen-linken Ecke des Rechtecks an.

width: Gibt die Breite des Rechtecks an.

height: Gibt die Höhe des Rechtecks an.

Löscht den Inhalt des Rechtecks.

Die Methode fillRect()

Die Methode fillRect(x, y, width, height) nimmt als ersten und zweiten Parameter eine X- und Y-Koordinate an. Diese beiden Koordinaten ergeben den Startpunkt unseres zweidimensionalen Kontexts. Das Rechteck wird ab dieser Stelle nach rechts (width) und unten (height) hin gezeichnet.

  • Html
  • Javascript
  • Ergebnis
<html> <head></head> <body> <canvas id="canvas_id" width="600" height="400" style="border: 1px solid red;"></canvas> </body> </html>
var Canvas = document.getElementById( "canvas_id" ); var Context = Canvas.getContext( "2d" ); //Eine diagonale Linie zeichnen Context.fillStyle = "#FF0000"; Context.fillRect( 50, 50, 200, 200 )

Das obige Beispiel zeichnet ein Quadrat mit den Seitenlängen von jeweils 200px an der Stelle 50/50 in unserem Canvas. Mithilfe der Eigenschaft fillStyle können wir die Farbe auswählen, mit der unser Quadrat ausgefüllt wird.

Die Methode strokeRect()

Die Methode strokeRect(x, y, width, height) nimmt als ersten und zweiten Parameter eine X- und Y-Koordinate an. Diese beiden Koordinaten ergeben den Startpunkt unseres zweidimensionalen Kontexts. Der Rahmen des Rechtecks wird ab dieser Stelle nach rechts (width) und unten (height) hin gezeichnet.

  • Html
  • Javascript
  • Ergebnis
<html> <head></head> <body> <canvas id="canvas_id" width="600" height="400" style="border: 1px solid red;"></canvas> </body> </html>
var Canvas = document.getElementById( "canvas_id" ); var Context = Canvas.getContext( "2d" ); //Eine diagonale Linie zeichnen Context.lineWidth = 10; Context.strokeStyle = "#FF0000"; Context.strokeRect( 50, 50, 200, 200 )

Das obige Beispiel zeichnet den Rahmen eines Quadrats mit den Seitenlängen von jeweils 200px an der Stelle 50/50 in unserem Canvas. Da wir den Rahmen des Quadrates zeichnen, haben wir die Möglichkeit mithilfe der bereits bekannten Linieneigenschaften die Breite (lineWidth) und Farbe (strokeStyle) zu setzen.

Die Methode clearRect()

Die Methode clearRect(x, y, width, height) nimmt als ersten und zweiten Parameter eine X- und Y-Koordinate an. Diese beiden Koordinaten ergeben den Startpunkt unseres zweidimensionalen Kontexts. Die Pixel des Rechtecks werden ab dieser Stelle nach rechts (width) und unten (height) hin gelöscht bzw. transparent gemacht.

  • Html
  • Javascript
  • Ergebnis
<html> <head></head> <body> <canvas id="canvas_id" width="600" height="400" style="border: 1px solid red;"></canvas> </body> </html>
var Canvas = document.getElementById( "canvas_id" ); var Context = Canvas.getContext( "2d" ); //Eine diagonale Linie zeichnen Context.fillStyle = "#FF0000"; Context.fillRect( 0, 0, Canvas.width, Canvas.height ); Context.clearRect( 50, 50, 200, 200 );

Im obigen Beispiel haben wir zunächst die gesamte Fläche des Canvas Rot gezeichnet und anschließend das Quadrat an der Stelle 50/50 mit den Seitenlängen 200px gelöscht bzw. transparent gemacht.