Rechtecke mit Canvas darstellen

Rechtecke sind die einzigen grafischen Primitivobjekte, die das Canvas-Objekt beherrscht. Alle anderen geometrischen Formen werden auf der Grundlage von Pfaden erstellt. Rechtecke lassen sich mit den Befehlen:

  • fillRect
  • strokeRect
  • clearRect

darstellen.

Rechtecke mit fillRect zeichnen

fillRect zeichnet mit einem gegebenen fillStyle ein gefülltes Rechteck.

<body onload="zeichneCanvas();">
<h1>Canvas Grundgerüst 1 - Beispiel</h1>
<!--Canvas-Element mit Angabe zur Hoehe und Breite-->
<canvas width="300" height="200">
<!--Text der nur angezeigt wird, wenn Canvas nicht unterstützt wird-->
Dein Browser kann diese Grafik nicht darstellen.
Es soll eigentlich ein violettes Rechteck zu sehen sein.</canvas>
<script type="text/javascript">
//Alles wird schön in eine Funktion gepackt
function zeichneCanvas(){
//Der 1.Canvas-Tag wird angesprochen
var myCanvas = document.getElementsByTagName('canvas')[0];
//Nur wenn getContext existiert...
if(myCanvas.getContext){
//...wird der 2d-Kontext zugewiesen
var context = myCanvas.getContext('2d');
//Farbe der Füllung festlegen
context.fillStyle = "rgb(255, 0, 255)";
//Gesamte Canvas füllen
context.fillRect(0, 0, myCanvas.width, myCanvas.height);
}
}
</script>
</body>
</html>

Beispiel ansehen

Rechtecke mit fillRect zeichnen

Beispiel ansehen

Canvas mit clearRect löschen

Die Methode clearRect löscht einen Bereich einen Canvas-Zeichenfläche. Damit ist dieses Methode unter anderem für Animationen sehr nützlich, denn eine Canvas-Animation besteht in der Regel aus einer Abfolge ständig neu erstellter Zeichnungen, wobei die vorhergehende in der Regel gelöscht wird. Ich habe daher zwei kleine JavaScript-Funktionen geschrieben, die ich hier auf mehreren Demonstrationsseiten immer wieder verwende:

  • clean (cxVar) - diese Funktion erwartet einen Canvas-Kontext als Übergabe-Parameter. Dann wird die Höhe und Breite der Canvas-Fläche ermittelt und diese gelöscht
  • cleanId(Id) - diese Funktion erwartet die Id eines Canvas-Tags, ermittelt dann einen Kontext um dann nach Ermittlung von Höhe und Breite die Canvas-Fläche zu löschen.

Quellcode für die beiden Funktionen

function clean(cxVar){
//neue Version
cxVar.clearRect(0,0,cxVar.canvas.width,cxVar.canvas.height);
}

function cleanId(Id){
//neue Version
var cxVar = document.getElementById(Id).getContext('2d');
cxVar.clearRect(0,0,cxVar.canvas.width,cxVar.canvas.height);
}

Komplexes Beispiel