HTML5 Rocks

HTML5 Rocks

HTML5 Funktionen

Grafiken

Das Web ist seit jeher ein visuelles Medium, das jedoch seine Grenzen hat. Bis vor Kurzem konnten HTML-Entwickler lediglich auf CSS und JavaScript zurückgreifen, um Animationen oder visuelle Effekte für ihre Websites zu erstellen, oder mussten sich auf ein Plug-in wie Flash verlassen.

Durch zusätzliche Techniken wie dem Canvas-Element, WebGL und SVG-Bildern hat sich dies nun geändert. Bei vielen neuen Funktionen geht es nun um Grafiken im Web: 2D-Canvas, WebGL, SVG, 3D-CSS-Transformationen und SMIL.

Neuerungen

The Future is Now!

Natürlich spielt Geschwindigkeit bei diesen neuen Technologien eine entscheidende Rolle. Glücklicherweise sind JavaScript-Module mittlerweile schnell genug, um 3D-Spiele auszuführen und Videos in Echtzeit zu verarbeiten. Außerdem wird der hardwarebeschleunigte Aufbau in vielen Browsern implementiert, sodass sogar CSS-Übergänge und -Transformationen nahtlos verlaufen.

Entwickler machen sich diese Funktionen zunutze: Im Web existiert eine wahre Flut von HTML-Grafikdemos, von Implementierungen alter 2D-Grafikalgorithmen bis hin zu brandneuen Techniken, die speziell für das moderne Web entwickelt wurden.

Browser-Support

“Grafiken” sind ein so breit gefächertes Thema, dass sich mehrere Spezifikationen damit beschäftigen. Eine umfassende Grafikdemo könnte einige der folgenden Elemente beinhalten:

Click each specification to see its support status on caniuse.com. Chrome-specific details can be found on the Chrome Platform Status.

Demos

In der Wildnis

An interactive film by Chris Black
3 Dreams of Black
Online music video from the Arcade Fire
The Wilderness Downtown
Online drawing application
deviantART muro
SVG support via svgweb
Wikipedia

Ressourcen