HTML5 in der mobilen Webentwicklung - HTML5-Apps fur iPhone und Android - page 72

Applikation nicht mit der nächsten Rechnung böse zu überraschen, sollte eine mobile
Webapplikation intelligenter mit den vorhandenen Ressourcen umgehen.
In diesem Unterkapitel werden die Grundlagen und Features des canvas -Elements
anhand vieler kleiner Beispiele vorgestellt. Die Beispiele (inklusive der vielen Grafiken)
sollen es Ihnen ermöglichen, einen raschen Überblick zu bekommen, um selbst abschätzen
zu können, inwiefern Sie das canvas -Element für eigene Projekte benutzen können.
Genug der vielen Worte, jetzt wird gezeichnet! Das folgende Beispiel zeigt, wie einfach
ein canvas -Element in eine HTML5-Seite eingebunden wird:
<canvas>Ihr Browser unterstützt kein HTML5 Canvas!</canvas>
Einfach, oder? canvas hat nur zwei Attribute, width und height . Standardmäßig sind
diese mit 300 (Breite) und 150 (Höhe) gesetzt. Der Inhalt des canvas -Elements ist der
sogenannte Fallback-Content. Er wird nur angezeigt, wenn der darstellende Browser
kein canvas -Element unterstützt. Ein so erstelltes canvas -Element sieht im Browser
dann so aus:
Bild vergessen? Nein. Ein Canvas ist zunächst leer, d. h. vollständig transparent. Um die
Fläche des Canvas sichtbar zu machen, kann er jedoch wie jedes andere HTML-Element
per CSS gestylt werden.
<canvas style "border: 1px dotted black;" id "myCanvas"></canvas>
Im obigen Beispiel wurde auch gleich ein id -Attribut hinzugefügt, damit wir das Ele-
ment später aus JavaScript ansprechen können. Der Canvas sieht nun so aus:
Bild 2.2: canvas mit id -Attribut.
Jetzt können wir per JavaScript auf den Canvas zugreifen und darauf zeichnen. Das fol-
gende Beispiel, das wir gleich Zeile für Zeile durchgehen, zeichnet zehn Quadrate mit
unterschiedlichen Füllungen auf den Canvas: