Ein Grundgerüst für die Reaktion auf Tastatureingaben
Wie bereits geschrieben ist die Nutzung des Canvas-Tags zwingend mit dem Einsatz von JavaScript verbunden. Im Beispiel soll der gesamt Canvas-Bereich mit einer Farbe gefüllt werden. Dazu wird
So sieht der <body>-Bereich 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); } } </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.