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

die bereits damit anfangen, dass ein Canvas -Bild eine Pixelgraik ist, während SVG eine
Vektorgraik darstellt. In beiden Fällen wird aber nur die Berechnungsvorschrit in den
Client geladen und die Graik dort erzeugt. Das spart gegenüber der Übertragung einer
vollständigen Graik vom Server natürlich exorbitant Datenmengen und damit wird auch
die Performance einer Seite gewaltig verbessert. Nur muss der Client halt die Ressourcen
aufbringen, die Graik dynamisch und schnell zu generieren. Das sollte aber bei modernen
Rechnern dem Prozessor kaum mehr als ein müdes Gähnen abnötigen.
PrAXISTIPP: Ein sehr gutes Tutorial zum Umgang mit Canvas -Objekten (allerdings
auf Englisch) gibt es unter https://developer.mozilla.org/en/canvas_tutorial .
14.5.1.1■Das Canvas-Element
Als Erstes müssen Sie zum Zeichnen ein Canvas -Objekt zur Verfügung haben. HTML5 stellt
dazu das neue Tag <canvas> zur Verfügung. Das ist im Grunde ein normales Blockelement
in einer Webseite, in dem man aber über die Methoden der Objektrepräsentation im DOM5-
Baum zeichnen kann. Obwohl man die Breite und Höhe von Blockelementen in modernen
Webseiten mittels CSS festlegen soll, gibt man bei Canvas -Elementen derzeit die Breite und
Höhe zudem mit HTML-Attributen an. Dies sorgt aktuell für einen zuverlässigeren Aufbau
in Browsern. Beispiel:
Listing 14.33■ Ein Canvas-Element in einer Webseite
<canvas width="250" height="150"></canvas>
Defaultmäßig sollte ein Canvas -Element ohne Dimensionsangaben vom Browser mit der
300 Pixel Breite und 150 Pixel Höhe initialisiert werden, aber darauf sollten Sie sich nicht
verlassen. In der Grundeinstellung sollte ein Canvas -Bereich vollkommen transparent sein.
Das können Sie aber ggf. mit CSS ändern.
Wenn ältere Browser das Canvas -Element nicht kennen, werden sie es nach dem Prinzip der
Fehlertoleranz ignorieren. Das können Sie dazu nutzen, dass Sie im Inneren einen alterna-
tiven Inhalt anbieten (etwa eine Graik oder erklärenden Text) - das kennt man ja von vielen
anderen Tags, die über die Geschichte des Webs neu eingeführt wurden. Browser, die das
Element unterstützen, ignorieren den Inhalt. Das bedeutet auch, dass das Canvas -Element
im Sinn von XML kein leeres Element darstellt. Beispiel:
Listing 14.34■ Ein canvas-Element mit alternativem Inhalt
<canvas width="250" height="150"><img src="canvas.png"
alt="Alternative zu Canvas"/></canvas>
HInWEIS: Auch neuere Browser, die grundsätzlich mit dem Canvas -Element
umgehen können, unterstützen nicht unbedingt alle Features.