Ein erstes einfaches Grundgerüst zum Einbau einer Canvas-Grafik
Der Einbau einer Canvas-Grafik ist denkbar einfach:
In eine HTML-Datei wird, am besten gleich mit dem HTML5-DOCTYPE (sonst spielt der Internet Explorer 9 nicht mit), im <body> einfach das Canvas-Element eingefügt. Das ganze sieht so aus:
<!DOCTYPE html> <html> <head> <title>Canvas-Grundgerüst</title> </head> <body> <canvas></canvas> </body> </html>
Das sieht soweit ganz nett aus, doch wie kommt da nun irgendetwas rein, was wie eine Grafik aussieht?
Wie bereits beschrieben, ist die Nutzung des Canvas-Tags zwingend mit dem Einsatz von JavaScript verbunden. Im Beispiel soll der gesamte Canvas-Bereich mit einer Farbe gefüllt werden. Dazu wird
- das HTML-Canvas-Element, das angesprochen werden soll, einer Variablen zugewiesen
- der 2D-Canvas-Kontext initialisiert (Es gibt zurzeit nur diesen 2D-Kontext, spätere Versionen unterstützen möglicherweise auch 3D). Wenn die Initailisierung fehlschlägt, wird nichts gemacht
- die Füllfarbe festgelegt
- das Rechteck gezeichnet
So sieht der <body>-Bereich aus:
<body> <h1>Canvas Grundgerüst Beispiel 1</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"> //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>
Diese Vorgehensweise hat aber einen Nachteil: Das JavaScript zum Füllen des Canvas-Objektes kann nur richtig ausgeführt werden, wenn die Seite vollständig geladen ist. Dies ist bei diesem einfachen kleinen Beispiel in der Regel kein Problem, trotz soll hier mit einem Beispiel-Code weitergearbeitet werden, bei dem der JavaScript-Code zum Zeichnen des Canvas-Inhaltes in einer Funktion gekapselt ist, die mit body onload
aufgerufen wird. Dann sieht der <body>-Bereich so aus:
<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); }//Ende if }//Ende zeichneCanvas() </script> </body> </html>
Außerdem kann man an dem Beispiel noch sehen, wie eine Füllungsfarbe festgelegt wird und ein gefülltes Rechteck gezeichnet wird.