Vorteile und Verbesserungen

HTML5 - Neuerungen bei Video, Audio und Vektorgrafik

Canvas

Das neu eingeführte <canvas>-Tag ist streng genommen ein Sündenfall. Damit wird ein rechteckiger Bereich auf der Website erstellt, in dem JavaScript-Code eingebaut werden kann, um Bitmap-Grafiken dynamisch zu rendern. Ursprünglich war HTML als reine Auszeichnungssprache gedacht, um Daten grafisch darstellen zu können. Die Umsetzung dieser Darstellung blieb dem Browser überlassen. Das jetzt direkt im Code implementierte Rendering bricht mit dem alten Prinzip.

Canvas nein: Der veraltete IE6 unterstützt kein HTML5.
Canvas nein: Der veraltete IE6 unterstützt kein HTML5.

Vor allem für grafisch anspruchsvolle Webdesigner ist das Tag eine gute Sache, weil sie es nun selbst in der Hand haben, wie bestimmte Seitenelemente aussehen sollen. Die Idee für das<canvas>-Element stammt von Apple. Alle Hersteller kopierten sie - schlussendlich auch Microsoft, das sich lange gesträubt hatte. Der dem Internet Explorer 9 soll das <canvas>-Element unterstützen. Grund: Viele Anwender nutzten bereits Tools von Drittanbietern, die den Browser um die Möglichkeiten von <canvas> erweiterten.

Trotz des neuen Standards funktioniert die identische Darstellung der Grafiken bisher nicht in allen Web-Browsern einwandfrei. So nahm Philip Taylor einen vollständigen Canvas-Test vor, der alle Arten prüft, auf die JavaScript mit grafischen Objekten umgehen kann. Sein Ergebnis: Viele Standardvorgänge - wie das Zeichnen einer Linie - sind in allen Browsern nahezu gleich implementiert. Einige andere grafische Routinen wie das Rendering von Text oder Kurven realisieren die Programme jedoch höchst unterschiedlich - sehr komplexe Prozesse können sogar zum Selbstabsturz führen und darin münden, dass Websites in unleserlichen Hieroglyphen enden.

Canvas ja: Firefox 3.6 bietet bereits volle HTML5-Unterstützung.
Canvas ja: Firefox 3.6 bietet bereits volle HTML5-Unterstützung.

Wenn Sie selbst testen möchten, ob Ihr Browser <canvas> in HTML5 unterstützt, klicken Sie auf diesen Link. Dort sind einige Links mittels eines jQuery-Plugins animiert worden. Das Plugin sucht sich die Links aus dem Quelltext heraus und gibt sie in Form einer animierten Linkwolke aus, die auf die Bewegungen des Mauszeigers reagiert. Wenn die Animation bei Ihnen funktioniert (vgl. auch die beiden Bilder) nutzen Sie bereits einen HTML5-tauglichen Browser. Internet Explorer 8 oder niedriger kann das nur mithilfe eines speziellen Plug-ins von Google (ExplorerCanvas). Die folgenden Versionen der gängigen Webbrowser unterstützen Canvas von Haus aus:

  • Apple Safari 5

  • Google Chrome 8

  • Microsoft Internet Explorer 9

  • Mozilla Firefox 3.6

  • Opera 10.60