HTML and CSS Reference
In-Depth Information
Bild 2.3:
Auf dem Canvas zeichnen.
<!doctype html>
<html>
<head><title>Canvas Demos</title>
<script>
function run()
{
var canvas document.getElementById('myCanvas');
var ctx canvas.getContext('2d');
for (var i 0; i < 10; i++)
{
var color Math.round((i/9) * 255);
ctx.fillStyle "rgb("+color+","+color+","+color+")";
ctx.fillRect (i*30, 60, 30, 30);
}
}
document.addEventListener("DOMContentLoaded", run, false);
</script>
</head>
<body>
<canvas style "border: 1px dotted black;" id "myCanvas">
Ihr Browser unterstützt kein HTML5 Canvas!
</canvas>
</body>
</html>
Das
canvas
-Element
im Body der Seite ist uns schon bekannt. Da wir
width
und
height
nicht weiter angegeben haben, wird der Canvas standardmäßig 300 x 150 Pixel
groß sein. Wirklich spannend wird es im JavaScript-Teil dieser Seite.
Zunächst wird ein Event-Listener für das
DOMContentLoaded
-Event registriert.
Dadurch wird unsere Funktion
run
aufgerufen, sobald der DOM-Tree (Document
Object Model) der Seite vollständig verfügbar ist. Die ersten beiden Zeilen der Funktion
greifen dann auf das
canvas
-Element und dessen Kontext zu:
var canvas document.getElementById('myCanvas');
var ctx canvas.getContext('2d');
Der Context, genau gesagt ein
CanvasRenderingContext2D
, ist das Objekt, das zum
Zeichnen innerhalb des Canvas benutzt wird. Die HTML5-Spezifikation schreibt ledig-
lich die Implementierung eines 2-D-Inhalts vor.
Um auf dem nun referenzierten Inhalt zu zeichnen, setzen wir Eigenschaften des refe-
renzierten Inhalts und rufen dessen Methoden auf - im Beispiel legen Sie die aktuell
