Das Canvas-Element in HTML5

Das Canvas-Element in HTML5 - Presentation Transcript

Das Canvas-Element in HTML5 Webkongress Erlangen, 4. September 2008 Martin Kliehm, Senior Frontend Engineer http://flickr.com/photos/margolove/2741249831/

Canvas – was ist das? “ It’s like having a little Apple ][ in your browser” http://www.oblomovka.com/wp/2008/08/08/the-edge-at-sxsw/

Canvas – was ist das? Eingeführt für das Apple OS X Dashboard, später in Safari und iTunes integriert

Canvas: Wie geht das? <canvas id=”canvas” width=”150” height=”150”> <img src=”fallback.jpg” width=”150” height=”150” alt=”Bildbeschreibung” /> </canvas> <script type=”text/javascript”> var canvas = document.getElementById ( 'canvas' ); if ( canvas . getContext ) { var ctx = canvas . getContext ( '2d' ); ctx.drawImage( img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight ); } </script>

Canvas, wer supported das Element?

Support von

– Firefox 1.5+ – Opera 9.5+ – Safari – Google Chrome – (Google) Gears

Workaround für IE: excanvas.js von Google

Über WHATWG in W3C HTML5 Draft übernommen

Wie schaut’s aus?  http://flickr.com/photos/redux/2475074390/

Wet Floor var canvas = document.getElementById ( 'canvas' ); if ( canvas . getContext ) { // Bildobjekt einbringen var img = document . images [ 0 ]; var effHeight = img . height * 0.5 ; // Kontext setzen var ctx = canvas . getContext ( '2d' ); /* Bild zeichnen: drawImage( * image, sx, sy, sWidth, sHeight, * dx, dy, dWidth, dHeight) */ ctx . drawImage ( img , 0 , 0 , img . width , img . height , 0 , 0 , img . width , img . height ); // Zwischenstand speichern ctx . save (); }

Wet Floor // Original-Bild zeichnen [...] // Spiegelbild zeichnen // Zwischenstand wiederherstellen ctx . restore (); // Bild spiegeln ctx . scale ( 1 , -1 ); // Bild verschieben ctx . translate ( 0 , - img . height ); // Bild zeichnen ctx . drawImage ( img , 0 , 0 , img . width , img . height , 0 , - img . height , img . width , img . height );

Wet Floor // Original-Bild zeichnen [...] // Spiegelbild zeichnen [...] // Gradient zeichnen ctx . restore (); ctx . scale ( 1 , -1 ); var gradient = ctx . createLinearGradient ( 0 , 0 , 0 , effHeight ); gradient . addColorStop ( 0 , 'rgba( 0, 0, 0, 0.5 )' ); gradient . addColorStop ( 1 , 'rgba( 0, 0, 0, 1.0 )' ); // Rechteck mit Gradient füllen ctx . fillStyle = gradient ; ctx . rect ( 0 , 0 , img . width , effectHeight ); ctx . fill ();

Standardmethoden

Bild integrieren: drawImage()‏

Verschieben: translate( x, y )‏

Zoomen: scale( x, y )‏

Drehen: rotate( Winkel )‏

Kombination: transform( scaleX, skewY, skewX, scaleY, translateX, translateY )‏

Drehung um 90° im Uhrzeigersinn ctx . translate ( img . height , 0 ); c tx . rotate ( Math . PI * 2 / 4 ); ctx . drawImage ( img , 0 , 0 , img . width , img . height , 0 , 0 , img . width , img . height );

Bildausschnitt zeichnen /* Bild zeichnen: drawImage( * image, sx, sy, sWidth, sHeight, * dx, dy, dWidth, dHeight) */ ctx . drawImage ( img, 50 , 35 , 230 , 230 , 0 , 0 , 230 , 230 );

Verzerren /* transform( scaleX, skewY, skewX, * scaleY, translateX, translateY ) */ ctx . transform ( 1 , Math . PI * 2 / 18 , 0 , 1 , 0 , 0 ); ctx . drawImage ( img , 0 , 0 , img . width , img . height , 0 , 0 , img . width , img . height );

Coverflow? Ablauf: 1. Umklappen 2. Zoom-Out: scale()‏ 3. Bewegen: translate()‏

Coverflow? Mit den derzeitigen 2D-Transformationen sind nur verzerrte Parallelogramme möglich, keine Trapeze

Trapez im Canvas http://www.netzgesta.de/reflex/ http://yuiblog.com/blog/2008/06/23/slicing/ ctx . clearRect( x, y, width, height )‏

Canvas-Bilder sind Kopien der gleichen Instanz http://flickr.com/photos/jerizm/2602242647/

2D – 3D? http://flickr.com/photos/energeticspell/2332820792/

2D – 3D? Mozilla baut 3D-Support ein über OpenGL var ctx = canvas . getContext ( '2d' ); Opera hat eine Abstraktionsebene dazwischen, um auch Nicht-OpenGL-Plattformen zu unterstützen (wie D3D)‏

Herausforderungen für die Zukunft