HTML5 als Designwerkzeug - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 189

<canvas width="300" height="300" id="canvas"></canvas>

Das canvas -Element bleibt leer. HTML-Code, der zwischen den canvas -Tags steht, wird
nur in älteren Browsern angezeigt. Sie können das Element wie jedes andere HTML-
Element mit CSS gestalten. Damit Sie das canvas -Element besser vom Rest der Seite
unterscheiden können, verpassen Sie ihm eine grau gepunktete Außenkante:

4

<style>
canvas {
outline: 1px dotted #ccc;

}
</style>

Nun müssen Sie die Canvas als JavaScript-Objekt registrieren. Dafür definieren Sie
eine Variable mit dem Namen canvas , der Sie den 2D-Kontext des canvas -Elements
zuordnen:

<script>
var canvasEl = document.getElementById('canvas');
var canvas = canvasEl.getContext('2d');
</script>

Die Funktion .getContext('2D') verknüpft das HTML-Element mit den JavaScript-
Funktionen.

4.5.2 Grundlegende Funktionen

Stellen Sie sich die Canvas dabei wie ein Koordinatensystem vor. Die obere linke Ecke
bildet dabei den Nullpunkt, von hier gehen alle Operationen aus. Um z. B. ein einfa-
ches schwarzes Rechteck mit einer Kantenlänge von 200 × 200 Pixeln zu zeichnen,
verwenden Sie folgende Funktion:

canvas.fillRect(50,50,200,200);

Sie übergeben der Funktion .fillRect() vier Parameter: den Startpunkt auf der X-
Achse des Koordinatensystems, den Startpunkt auf der Y-Achse, die Breite und die
Höhe des Rechtecks. In diesem Fall beginnt das Quadrat also 50 Pixel unter der linken
oberen Ecke und ist genau 200 Pixel breit und hoch (Abbildung 4.45).