[HTML5, Canvas] Rechteck zeichnen

Drucken
( 0 Votes ) 
Hauptkategorie: Programmieren Kategorie: HTML5
Erstellt am 30.01.2013 Zuletzt aktualisiert am 30.01.2013 Geschrieben von Jonny132
Um ein Rechteck in ein Canvas zu zeichnen, muss zuerst ein solches erstellt werden.
Dazu verwendet man den <canvas>-Tag. Mittels JavaScript können wir danach auf dieses Canvas zeichnen. 
  
Rechteck in ein Canvas-Objekt zeichnen:
<canvas id="meinRechteckCanvas" width="300" height="300">
</canvas>
<script>
var e = document.getElementById("meinRechteckCanvas");
var canv = e.getContext("2d");
canv.fillStyle = "green";
canv.fillRect(50,50,200,200);
</script>
1359553619html5 canvas_rechteck_zeichnen 
Im Beispiel wird zuerst ein Canvas erstellt, welches die ID 'meinRechteckCanvas' erhält. Somit können wir dieses Canvas mittels JavaScript und der Funktion getElementById() ansprechen.

Danach holen wir uns den Context des Canvas mittels getContext()-Funktion.
Nun können wir auf Eigenschaften und Funktionen des Contextes zugreiffen und somit die Farbe setzen und mittels fillRect()-Funktion ein Rechteck auf das Canvas zeichnen. Als Parameter übergeben wir hier die XY Werte an welcher das linke obere Eck des Rechtecks sein soll und die Breite und Höhe des Rechtecks.


Nicht gefülltes Rechteck in ein Canvas einfügen:
<script>
var e=document.getElementById("meinRechteckCanvas");
var canv=e.getContext("2d");
canv.font="50px Arial";
canv.strokeStyle = "green";
canv.strokeRect(50,50,200,200);
</script>
Nicht gefülltes Rechteck in ein Canvas zeichnen

 
Für ein nicht gefülltes Rechteck muss lediglich die Funktion strokeRect() mit der dazugehörigen strokeStyle-Eigenschaft anstadt fillRect() aufgerufen werden.


    Veröffentlichen Sie ihre Kommentare ...