O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

Exploring Canvas

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Próximos SlideShares
Exploring Canvas
Exploring Canvas
Carregando em…3
×

Confira estes a seguir

1 de 44 Anúncio

Exploring Canvas

Baixar para ler offline

This presentation introduces developers to the functionality of the HTML5 canvas tag. It runs from getting started (slow start) to more comprehensive examples designed to be inspirational in nature. This presentation is not designed to make you an expert with canvas, but to introduce developers to the wealth of possibilities.

This presentation introduces developers to the functionality of the HTML5 canvas tag. It runs from getting started (slow start) to more comprehensive examples designed to be inspirational in nature. This presentation is not designed to make you an expert with canvas, but to introduce developers to the wealth of possibilities.

Anúncio
Anúncio

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Semelhante a Exploring Canvas (20)

Anúncio

Mais recentes (20)

Exploring Canvas

  1. 1. Exploring Canvas Kevin Hoyt khoyt@adobe.com Twitter, AIM,YIM: parkerkrhoyt http://blog.kevinhoyt.com
  2. 2. Agenda • Getting started • Charting • Drawing • Interaction • Painting • Animation
  3. 3. Part #1: Getting Started
  4. 4. Using the Canvas Tag <canvas id="chart" width="150" height="150"> Current stock price: $3.15 +0.15 </canvas> <canvas id="clock" width="150" height="150"> <img src="imagesclock.png" width="150" height="150"/> </canvas>
  5. 5. Rendering Context var canvas = document.getElementById( 'canvas' ); var context = null; if( canvas.getContext ) { context = canvas.getContext( '2d' ); // Drawing code here } else { // Unsupported code here }
  6. 6. Coordinate Space 0 0 X y x height width Y
  7. 7. Drawing Paths context.beginPath(); context.arc( 75, 75, 50, 0, Math.PI * 2, true ); context.moveTo( 110, 75 ); context.arc( 75, 75, 35, 0, Math.PI, false ); context.moveTo( 65, 65 ); context.arc( 60, 65, 5, 0, Math.PI * 2, true ); context.moveTo( 95, 65 ); context.arc( 90, 65, 5, 0, Math.PI * 2, true ); // context.closePath(); context.stroke(); // context.fill();
  8. 8. Understanding Lines (0, 0) (0, 0) (3, 1) (3.5, 1) (3, 5) (3.5, 5) 1.0 width 1.0 width
  9. 9. Caps, Joints and Miters butt round width / 2 round bevel x limit square miter from joint
  10. 10. Styles and Colors fillStyle strokeStyle orange #FFA500 rgb( 255, 165, 0 ) rgba( 255, 165, 0, 1 )
  11. 11. Gradients // Start point and stop point // Controls angle/direction of gradient var fill = context.createLinearGradient( 0, 0, 0, 50 ); // 0 - 1 relative to gradient range fill.addColorStop( 0, ‘#FFFFFF’ ); fill.addColorStop( 0.5, ‘#FFA500’ ); fill.addColorStop( 1, ‘#FFFFFF’ ); // Apply the fill style context.fillStyle = fill; context.fillRect( 0, 0, 50, 50 );
  12. 12. Gradients // Inner circle point and radius // Outer circle point and radius // Not necessarily a single point var fill = context.createRadialGradient( 95, 15, 15, 102, 20, 40 ); // 0 - 1 relative to gradient range fill.addColorStop( 0, ‘#FFFFFF’ ); fill.addColorStop( 0.5, ‘#FFA500’ ); fill.addColorStop( 1, ‘#FFFFFF’ ); // Apply the fill style context.fillStyle = fill; context.fillRect( 0, 0, 50, 50 );
  13. 13. Text and Shadows var canvas = document.getElementById( 'canvas' ); var ctx = null; if( canvas.getContext ) { ctx = canvas.getContext( '2d' ); ctx.shadowOffsetX = 2; ctx.shadowOffsetY = 2; ctx.shadowBlur = 2; ctx.shadowColor = 'rgba( 0, 0, 0, 0.5 )'; ctx.font = '20px Times New Roman'; ctx.fillStyle = 'black'; ctx.fillText( 'Sample String', 5, 30 ); }
  14. 14. Shapes
  15. 15. Part #2: Charting
  16. 16. PlotKit
  17. 17. jqPlot
  18. 18. RGraph
  19. 19. Part #3: Drawing
  20. 20. Follow the Mouse
  21. 21. Saving
  22. 22. Saving with Flair
  23. 23. Looking Ahead
  24. 24. Part #4: Interaction
  25. 25. Tracking Points What’s clickable? How do you know? Canvas vs DOM...
  26. 26. Curves Quadratic Curve Cubic Curve
  27. 27. Part #5: Painting
  28. 28. Load From Server
  29. 29. Load From Server var canvas = document.getElementById( 'canvas' ); var ctx = canvas.getContext( '2d' ); var img = null; $( '#make' ).click( function( evt ) { img = new Image(); img.onload = function() { ctx.drawImage( img, 0, 0 ); }; img.src = 'images/backdrop.png'; } );
  30. 30. Load From Server
  31. 31. Other Canvas
  32. 32. Other Canvas var canvas = document.getElementById( 'lines' ); var ctx = canvas.getContext( '2d' ); ctx.beginPath(); ctx.moveTo( 30, 96 ); ctx.lineTo( 70, 66 ); ctx.lineTo( 103, 76 ); ctx.lineTo( 170, 15 ); ctx.stroke(); canvas = document.getElementById( 'canvas' ); ctx = canvas.getContext( '2d' ); $( '#lines' ).click( function( evt ) { ctx.drawImage( this, 0, 0 ); } );
  33. 33. Other Canvas
  34. 34. Embedded Data
  35. 35. Embedded Data var canvas = document.getElementById( 'canvas' ); var ctx = canvas.getContext( '2d' ); var img = null; $( '#embed' ).click( function( evt ) { img = new Image(); img.src = 'data:image/png;base64,iVB...'; ctx.drawImage( img, 0, 0 ); } );
  36. 36. Pixel Pushing context.drawImage( myImg, frame.x, frame.y, frame.width, frame.height );
  37. 37. Pixel Slicing context.drawImage( myImg, frame.x, frame.y, frame.width, frame.height, 22, 21, frame.width, frame.height );
  38. 38. Pixel Dissecting
  39. 39. Part #6: Animation
  40. 40. Update on Interval
  41. 41. Tweening JSTweener.addTween( position, { time: 3, transition: 'easeOutExpo', x: end.x, y: end.y, onUpdate: function() { context.clearRect( 0, 0, 640, 480 ); // Draw updates to sprites }, onComplete: function() { position = null; start = null; end = null; } } );
  42. 42. Line Interpolation
  43. 43. Physics Box2D JS
  44. 44. Questions? Kevin Hoyt khoyt@adobe.com Twitter, AIM,YIM: parkerkrhoyt http://blog.kevinhoyt.com

Notas do Editor

  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

×