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>
Rechtecke mit fillRect zeichnen
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); }