Exploring Canvas

  • 1,921 views
Uploaded on

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 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.

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,921
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
54
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • \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

Transcript

  • 1. Exploring Canvas Kevin Hoyt khoyt@adobe.com Twitter, AIM,YIM: parkerkrhoyt http://blog.kevinhoyt.com
  • 2. Agenda • Getting started • Charting • Drawing • Interaction • Painting • Animation
  • 3. Part #1:Getting Started
  • 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. Rendering Contextvar canvas = document.getElementById( canvas );var context = null;if( canvas.getContext ){ context = canvas.getContext( 2d ); // Drawing code here} else { // Unsupported code here}
  • 6. Coordinate Space 0 0 X y x height width Y
  • 7. Drawing Pathscontext.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. Understanding Lines(0, 0) (0, 0) (3, 1) (3.5, 1) (3, 5) (3.5, 5) 1.0 width 1.0 width
  • 9. Caps, Joints and Miters butt round width / 2 round bevel x limit square miter from joint
  • 10. Styles and Colors fillStyle strokeStyle orange #FFA500 rgb( 255, 165, 0 ) rgba( 255, 165, 0, 1 )
  • 11. Gradients// Start point and stop point// Controls angle/direction of gradientvar fill = context.createLinearGradient( 0, 0, 0, 50 );// 0 - 1 relative to gradient rangefill.addColorStop( 0, ‘#FFFFFF’ );fill.addColorStop( 0.5, ‘#FFA500’ );fill.addColorStop( 1, ‘#FFFFFF’ );// Apply the fill stylecontext.fillStyle = fill;context.fillRect( 0, 0, 50, 50 );
  • 12. Gradients// Inner circle point and radius// Outer circle point and radius// Not necessarily a single pointvar fill = context.createRadialGradient( 95, 15, 15, 102, 20, 40);// 0 - 1 relative to gradient rangefill.addColorStop( 0, ‘#FFFFFF’ );fill.addColorStop( 0.5, ‘#FFA500’ );fill.addColorStop( 1, ‘#FFFFFF’ );// Apply the fill stylecontext.fillStyle = fill;context.fillRect( 0, 0, 50, 50 );
  • 13. Text and Shadowsvar 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. Shapes
  • 15. Part #2:Charting
  • 16. PlotKit
  • 17. jqPlot
  • 18. RGraph
  • 19. Part #3:Drawing
  • 20. Follow the Mouse
  • 21. Saving
  • 22. Saving with Flair
  • 23. Looking Ahead
  • 24. Part #4:Interaction
  • 25. Tracking Points What’s clickable? How do you know? Canvas vs DOM...
  • 26. CurvesQuadratic Curve Cubic Curve
  • 27. Part #5:Painting
  • 28. Load From Server
  • 29. Load From Servervar 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. Load From Server
  • 31. Other Canvas
  • 32. Other Canvasvar 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. Other Canvas
  • 34. Embedded Data
  • 35. Embedded Datavar 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. Pixel Pushing context.drawImage( myImg, frame.x, frame.y, frame.width, frame.height );
  • 37. Pixel Slicing context.drawImage( myImg, frame.x, frame.y, frame.width, frame.height, 22, 21, frame.width, frame.height );
  • 38. Pixel Dissecting
  • 39. Part #6:Animation
  • 40. Update on Interval
  • 41. TweeningJSTweener.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. Line Interpolation
  • 43. Physics Box2D JS
  • 44. Questions? Kevin Hoyt khoyt@adobe.com Twitter, AIM,YIM: parkerkrhoyt http://blog.kevinhoyt.com