HTML5 Canvas

Dynamische Grafiken und Animationen im IE9

Montag den 31.01.2011 um 12:01 Uhr

von Damian Robota

Die Darstellung von Grafiken und Animationen im Web wird sich mit HTML5 verändern. Wir zeigen Ihnen, wie funktioniert und stellen Ihnen passende Tech-Demos für den Internet Explorer 9 vor.

<Canvas> ist ein grafisches Element, das im Internet Explorer 9 mit HTML5 eingeführt wird. Mit dem Canvas-Tag ist es möglich Grafiken und einfache Animationen mit Hilfe von JavaScript dynamisch im Web zu erzeugen. Die Grafiken und Animationen werden dabei vom Internet Explorer 9 nativ dargestellt. Es werden also keine weiteren Plug-Ins oder ähnliche Erweiterungen benötigt.

Der Internet Explorer 9 steht derzeit also Beta-Version zum Download bereit und kommt mit den gängigen HTML5-Tags zurecht. Somit lassen sich auch mit dem Canvas-Tag via JavaScript Bitmapgrafiken im Browser rendern.

Microsoft möchte möglichst viele Teile der im Browser dargestellten Inhalte mit der im Rechner eingebauten Hardware beschleunigen. Dies ist auch bei <Canvas> der Fall. Deswegen wird die Darstellung im Internet Explorer 9 mit Hilfe des Grafikprozessors (GPU) beschleunigt.

So funktioniert <Canvas>

Der Canvas-Tag wird dazu verwendet, kleine rechteckige Flächen für JavaScript-Code zu reservieren. Mit JavaScript kann anschließend jedes einzelne Pixel angesprochen und verändert werden. Das Tag wird vor allem für statische oder dynamische Grafiken beziehungsweise Animationen verwendet und richtet sich daher vor allem an Grafiker oder Designer von Webseiten. Mit <Canvas> können auch einfache Linien oder Tabellen erstellt werden.

Dabei werden die häufig genutzten Arbeitsschritte, wie beispielsweise das Linienzeichnen, in allen Browsern mehr oder weniger gleich angezeigt. Es gibt aber in überraschend vielen Bereichen große Unterschiede in der Browserdarstellung, obwohl der gleiche Programmcode dahinter steckt.

Neben normalen Linien- und Rechteckszeichenfunktionen ermöglicht <Canvas> auch das Zeichnen von Kreisen, Kurven, Farbverläufen oder Schatten. Zudem können Grafiken im PNG-, GIF- oder JPEG-Format importiert und bearbeitet werden. Die Grafiken lassen sich skalieren, frei positionieren und schneiden. Alle erstellten Bilder können zudem in mehreren Abstufungen transparent dargestellt werden. Mit <Canvas> lassen sich im Web auch ganz einfache Spiele erstellen, die ähnlich wie heutige Flashgames mit überschaubaren Grafiken ausgestattet werden.

Montag den 31.01.2011 um 12:01 Uhr

von Damian Robota

Kommentieren Kommentare zu diesem Artikel (0)
784913