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:

• PNG-Alpha-Transparenz
• Daten-URLs
• CSS3-Farben
• SVG (Basis-Support)
• Canvas (Basis-Support)
• Videoelement
• CSS-Transformationen
• Text API für Canvas
• SVG in CSS-Hintergründen
• SVG-Effekte für HTML-Elemente
• SVG-SMIL-Animation
• SVG-Schriftarten
• SVG-Filter
• CSS3-Animation
• Inline-SVG in HTML5
• 3D-Canvas-Grafiken/WebGL
• CSS-3D-Transformationen

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

Demos

• Chrome Experiments Verschiedene WebGL-/Canvas-Demos, die die Hardwarebeschleunigung nutzen
• TinkerCad WebGL Solid Modeling CAD
• Animated CSS3 cube using 3D transforms 3D-Effekte ohne WebGL
• Hakim.se / Experiments Schön gestaltete Canvas-Experimente
• 8-Bit color cycling with HTML5 Old School-Spieleeffekt
• IE9 Graphics demos Verschiedene Canvas-Demos, die die Hardwarebeschleunigung nutzen
• Blowing up HTML5 video and mapping it into 3D space Schöne Integration von Video und Canvas

In der Wildnis

Ressourcen

• svgweb SVG-Support in allen Browsern
• Adobe Illustrator HTML5 pack SVG-, CSS- und Canvas-Support für Illustrator
• Raphaël Einpassung der Animationsbibliothek (SVG)
• cakejs JavaScript-Szenengraph-Bibliothek für das Canvas-Element
• Processing.js Processing-Port der Animations-Skriptsprache in JavaScript - verwendet Canvas
• three.js Einfaches 3D-Modul, verwendet Canvas, SVG, WebGL
• GPU Accelerated Compositing in Chrome Hintergrundinformationen und Details zur Implementierung des hardwarebeschleunigten Aufbaus in Chrome