Download as KEY, PPTX
Uploaded byKevin Hoyt
Exploring Canvas
The document provides a comprehensive guide on using the HTML canvas element, covering various aspects such as drawing, charting, interactions, and animations. It includes code examples for rendering shapes, applying styles and gradients, and handling user input. Additionally, it discusses advanced topics like loading images, pixel manipulation, and animation techniques.
Exploring Canvas
- 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.
- 4. Using the CanvasTag <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 Context var 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 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. 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 andMiters 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 pointand 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. Gradients // Inner circlepoint 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. Text and Shadows varcanvas = 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.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25. Tracking Points What’s clickable? How do you know? Canvas vs DOM...
- 26. Curves Quadratic Curve Cubic Curve
- 27.
- 28.
- 29. Load From Server varcanvas = 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.
- 31.
- 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.
- 34.
- 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. 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.
- 39.
- 40.
- 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.
- 43.
- 44. Questions? KevinHoyt khoyt@adobe.com Twitter, AIM,YIM: parkerkrhoyt http://blog.kevinhoyt.com