JavaScript-Techniken bei HTML5 und mehr - JavaScript: Die Universelle Sprache zur Web-Programmierung - page 421

14.5.1.2■Der Graikkontext
Ein Canvas-Objekt stellt sogenannte Graikkontexte zur Verfügung. Das sind erst einmal
einfach die Bereiche, in denen man konkret zeichnen kann, allerdings im Sinn der Objekt-
orientierung mit implementierten Methoden. Im Konzept von HTML5 sind sowohl zweidi-
mensionale als auch dreidimensionale Bereiche vorgesehen, wobei zum Zeitpunkt der
Bucherstellung nur die zweidimensionalen Bereiche richtig unterstützt werden.
HInWEIS: Der Bereich zum Zeichnen ist nach der Initialisierung erst einmal
leer.
Der Zugrif auf den Graikkontext erfolgt über ein Canvas -Objekt, das Sie wie immer als node
adressieren, und dessen Methode getContext() . Als Parameter geben Sie die Art des Graik-
kontextes an (zweidimensional oder dreidimensional). Derzeit macht nur "2d" Sinn. Etwa so:
Listing 14.35■ Selektion eines Bereichs zum Zeichnen
var zb = document.getElementsByTagName('canvas')[0].getContext('2d');
In der Regel werden Sie mit einer Id auf das Canvas -Objekt zugreifen.
HInWEIS: Eine Eigenheit von Canvas -Bereichen ist, dass eine einmal dort ge -
zeichnete Form auch erhalten bleibt, wenn sie nicht verdeckt wird, auch wenn Sie
eine neue Form in dem Canvas -Bereich erzeugen. Wenn Sie immer einen leeren
Bereich zum Zeichnen einer neuen Form benötigen, müssen Sie sich selbst darum
kümmern, dass der Canvas -Bereich beim Zeichnen der neuen Form leer ist.
14.5.1.3■Das Koordinatensystem und das Gitter
Grundlage jeder graischen Ausgabe in einem Canvas -Bereich (aber auch bei anderen Tech-
niken wie CSS3 oder SVG) ist ein Koordinatensystem , in dem mit zwei Werten ein Tupel
speziiziert werden kann, an dem eine bestimmte Ausgabe erfolgen soll, und ein unsichtba-
res überlagertes Gitter (Grid), das den Bereich in Einheiten skaliert und das man als Gra-
ikkontext selektiert. In dem in HTML5/DOM5 verwendeten, Koordinatensystem lässt sich
durch die Angabe von zwei Werten (sogenannte Vektoren , die vom Ursprung des Koordina-
tensystems ausgehen) ein beliebiger Punkt in dem Koordinatensystem eindeutig festlegen.
Dies sind ein x-Wert und ein y-Wert, wie man es meist aus dem Mathematikunterricht in
der Schule kennt. Die Maßeinheit ergibt sich aus dem Grid, wobei normalerweise eine Ein-
heit im Grid mit einem Pixel im Canvas -Element korrespondiert. Das hier verwendete Koor-
dinatensystem unterscheidet sich aber ein wenig von dem im Mathematikunterricht ot
verwendeten System. Die obere linke Ecke des Canvas -Bereichs wird mit (0, 0) - also dem
Koordinatensystemursprung - abgebildet (sonst ist es meist die untere linke Ecke). Dabei
ist der x-Wert die Anzahl der Bildschirmpixel von links ausgehend, also in der Waagerech-
ten, und y ist die Zahl der Pixel, von oben angefangen, also in der Senkrechten. Das Koordi-
naten-Tupel (42, 10) beschreibt z. B. einen Punkt, der 42 Pixel vom linken Rand des Canvas -
Bereichs und 10 Pixel vom oberen Rand des Canvas -Bereichs entfernt ist. Im Grunde sollten