HTML and CSS Reference
In-Depth Information
tion und Aufbau visualisieren in diesem Fall den Aufbau der App. Aber auch hier sind
Ihrer Fantasie keine Grenzen gesetzt.
Abbildung 4.44 Die komplette Animationsabfolge in der Übersicht
4.5 Zeichnen mit JavaScript - das canvas-Element
Ein besonders interessantes Feature von HTML5 ist das canvas -Element. Mit der Can-
vas , abgeleitet vom englischen Wort für »Leinwand«, können Sie Grafiken mit Java-
Script-Befehlen direkt im Browser zeichnen. Diese Funktion wurde 2004 von Apple
eingeführt und nach und nach auch von anderen Browserherstellern implementiert.
Heute unterstützen alle modernen Webbrowser, inklusive des Internet Explorers 9
die canvas -Funktion.
Mit canvas können Sie, vergleichbar mit einem Grafikprogramm, Kreise, Rechtecke
und komplexe Formen zeichnen, diese mit Farben und Verläufen füllen und mit
Transparenzeffekten und Schlagschatten versehen. Selbst die Verarbeitung von Tex-
ten und Bilddateien ist möglich. canvas unterstützt allerdings nur zweidimensionale
Pixeldaten, Vektorformate wie SVG können Sie hiermit nicht zeichnen.
Da sie live im Browser generiert werden, können Sie beim Zeichnen von Canvas-Gra-
fiken Nutzerinteraktionen einfließen lassen. In diesem Kapitel werden Sie eine ein-
fache Zeichen-App mit Canvas und JavaScript erstellen. Zunächst aber zu den
grundlegenden Befehlen.
4.5.1 Erster Schritt: Canvas und Context registrieren
Bevor Sie mit dem Zeichnen beginnen können, müssen Sie in Ihrem HTML-Dokument
ein canvas -Element anlegen. Dieses muss eine feste Größe besitzen und über eine id
eindeutig identifizierbar sein - so können Sie es mit JavaScript richtig adressieren.
Search WWH ::




Custom Search