Your SlideShare is downloading. ×
0
Exploring Canvas
Exploring Canvas
Exploring Canvas
Exploring Canvas
Exploring Canvas
Exploring Canvas
Exploring Canvas
Exploring Canvas
Exploring Canvas
Exploring Canvas
Exploring Canvas
Exploring Canvas
Exploring Canvas
Exploring Canvas
Exploring Canvas
Exploring Canvas
Exploring Canvas
Exploring Canvas
Exploring Canvas
Exploring Canvas
Exploring Canvas
Exploring Canvas
Exploring Canvas
Exploring Canvas
Exploring Canvas
Exploring Canvas
Exploring Canvas
Exploring Canvas
Exploring Canvas
Exploring Canvas
Exploring Canvas
Exploring Canvas
Exploring Canvas
Exploring Canvas
Exploring Canvas
Exploring Canvas
Exploring Canvas
Exploring Canvas
Exploring Canvas
Exploring Canvas
Exploring Canvas
Exploring Canvas
Exploring Canvas
Exploring Canvas
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Exploring Canvas

1,966

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

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

  • Be the first to like this

No Downloads
Views
Total Views
1,966
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
55
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

    ×