Neuerungen
- High Performance Animations
- Antialiasing 101
- Case Study: Building Racer
- Creating Roll It
- Next Generation Web Layout: National Geographic Forest Giant
- CSS Masking
- Easy High DPI Images
- Profiling Mobile HTML5 Apps With Chrome DevTools
- Case-study: JAM with Chrome - How we made the UI rock
- Splash Vector Graphics on your Responsive Site
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