Das Canvas-Element in HTML5

10,404 views
10,268 views

Published on

My talk about the canvas element in HTML5, held at the Webkongress Erlangen, 2008-09-04

Published in: Technology
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
10,404
On SlideShare
0
From Embeds
0
Number of Embeds
488
Actions
Shares
0
Downloads
0
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

Das Canvas-Element in HTML5

  1. 1. Das Canvas-Element in HTML5 Webkongress Erlangen, 4. September 2008 Martin Kliehm, Senior Frontend Engineer http://flickr.com/photos/margolove/2741249831/
  2. 2. 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/
  3. 3. Canvas – was ist das? Eingeführt für das Apple OS X Dashboard, später in Safari und iTunes integriert
  4. 4. 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>
  5. 5. Canvas, wer supported das Element? <ul><li>Support von </li></ul><ul><ul><li>– Firefox 1.5+ – Opera 9.5+ – Safari – Google Chrome – (Google) Gears </li></ul></ul><ul><li>Workaround für IE: excanvas.js von Google </li></ul><ul><li>Über WHATWG in W3C HTML5 Draft übernommen </li></ul>
  6. 6. Wie schaut’s aus?  http://flickr.com/photos/redux/2475074390/
  7. 7. 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 (); }
  8. 8. 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 );
  9. 9. 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 ();
  10. 10. Standardmethoden <ul><li>Bild integrieren: drawImage()‏ </li></ul><ul><li>Verschieben: translate( x, y )‏ </li></ul><ul><li>Zoomen: scale( x, y )‏ </li></ul><ul><li>Drehen: rotate( Winkel )‏ </li></ul><ul><li>Kombination: transform( scaleX, skewY, skewX, scaleY, translateX, translateY )‏ </li></ul>
  11. 11. 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 );
  12. 12. 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 );
  13. 13. 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 );
  14. 14. Coverflow? Ablauf: 1. Umklappen 2. Zoom-Out: scale()‏ 3. Bewegen: translate()‏
  15. 15. Coverflow? Mit den derzeitigen 2D-Transformationen sind nur verzerrte Parallelogramme möglich, keine Trapeze
  16. 16. Trapez im Canvas http://www.netzgesta.de/reflex/ http://yuiblog.com/blog/2008/06/23/slicing/ ctx . clearRect( x, y, width, height )‏
  17. 17. Canvas-Bilder sind Kopien der gleichen Instanz http://flickr.com/photos/jerizm/2602242647/
  18. 18. 2D – 3D? http://flickr.com/photos/energeticspell/2332820792/
  19. 19. 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)‏
  20. 20. Herausforderungen für die Zukunft <ul><li>Vollständiger Support von Canvas, z.B. Schatten </li></ul><ul><li>3D-Rendering </li></ul><ul><li>Barrierefreiheit </li></ul><ul><li>Abgleich mit anderen Standards, z.B. CSS Transforms </li></ul>http://flickr.com/photos/veo/226328414/
  21. 21. Beispiele http://flickr.com/photos/tais/2411643409/
  22. 22. Links <ul><li>Mozilla Canvas Tutorial: http://developer.mozilla.org/En/Canvas_tutorial </li></ul><ul><li>W3C HTML 5 Draft: http://www.w3.org/html/wg/html5/ </li></ul><ul><li>Ernest Delgado: http://www.ernestdelgado.com/tags/canvas/ http://yuiblog.com/blog/2008/06/23/slicing/ </li></ul><ul><li>Google ExplorerCanvas: http://excanvas.sourceforge.net/ </li></ul><ul><li>Opera 3D Canvas: http://my.opera.com/timjoh/blog/2007/11/13/taking-the-canvas-to-another-dimension </li></ul><ul><li>Ich: http://learningtheworld.eu , martin.kliehm@namics.com </li></ul>

×