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

Bild 14.15■ Absolut genau lokalisiert

■ ■ 14.5■Zeichnen mit Canvas, SVG und CSS3

Ein optisches Highlight von HTML5 ist sicher, dass Sie mit Hilfe von Canvas -Objekten oder
SVG zeichnen können. Aber auch - oder gerade - hier sollten wir wieder von DOM5 und
dem programmierbasierten Zeichnen mit JavaScript statt von HTML sprechen. Die Idee hin-
ter solchen Bereichen zum Zeichnen ist auch keinesfalls neu, sondern in vielen Program-
miersprachen wie etwa Java oder auch SVG schon seit zig Jahren etabliert. Die Methoden,
die etwa ein Canvas -Objekt bereitstellt, dürten daher für Java-Programmierer kalter Kafee
und ohne große Erklärung anzuwenden sein. Sie werden auch zwischen dem Zeichnen mit
Canvas-Methoden und SVG eine hohe Ähnlichkeit kennenlernen. Allerdings hört man von
reinen Webdesignern ot Klagen, dass das Canvas -Objekt webfremd, zu rudimentär, zu
benutzerunfreundlich und viel zu technisch implementiert wäre. Dieses Lamentieren hört
man aber auch beim Umgang mit SVG. Allerdings werden wahrscheinlich in Zukunt Web-
Frameworks geeignete Methoden bereitstellen, um auf einer höheren Ebene diese Zeichen-
operationen auszuführen. Auch Graikprogramme werden Canvas -Objekte rein visuell
erstellen und speichern lassen. Wir wollen uns dennoch hier ganz nativ dem Canvas -Objekt,
dem Umgang mit SVG und auch den neuen Zeichenoperationen mit CSS3, die ot sehr ähn-
liche Dinge ermöglichen, nähern.

14.5.1■Canvas

Betrachten wir zuerst den Umgang mit Canvas -Techniken. Die meisten Ausführungen dazu
werden sich auf SVG und CSS3 übertragen lassen. Allerdings gibt es einige Besonderheiten,