HTML-5    Canvas
Agenda <ul><li>Where it has started </li></ul><ul><li>What change can it bring? </li></ul><ul><li>Understanding the lingo ...
History
Canvas vs SVG  <ul><li>High performance  </li></ul><ul><li>Everything is a pixel.  </li></ul><ul><li>Save the resulting im...
Lingo
What it is not
First kicks <canvas id=&quot;stockGraph&quot; width=&quot;150&quot; height=&quot;150&quot;> You browser doesn't support ca...
Basic shapes Rectangle : fillRect(x,y,width,height)  strokeRect(x,y,width,height)  clearRect(x,y,width,height) Circle: arc...
Paths beginPath() closePath() stroke() Fill() moveTo(x, y) lineTo(x, y)
Exercise - 1
Solution <ul><li>ctx.beginPath(); </li></ul><ul><li>ctx.arc(75,75,50,0,Math.PI*2,true);  // Outer circle </li></ul><ul><li...
Beziere curves quadraticCurveTo(cp1x, cp1y, x, y)  bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
Styling lineWidth = value lineCap = type lineJoin = type miterLimit = value fillStyle = color strokeStyle = color ctx.glob...
Images var img = new Image();  img.src = 'myImage.png'; // Set source path OR Img = 'data:image/gif;base64,R0lGO......' dr...
Transformations translate(x, y) rotate(alpha)
Compositing  globalCompositeOperation = [type] ctx.beginPath(); drawAPath(); ctx.clip();
Animate <ul><li>Clear the canvas </li></ul><ul><li>Save the canvas state </li></ul><ul><li>Draw animated shapes </li></ul>...
Canvas vs Flash
Upcoming SlideShare
Loading in …5
×

Canvas

1,338 views
1,292 views

Published on

This presentation shows different features HTML

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,338
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
19
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Canvas

  1. 1. HTML-5 Canvas
  2. 2. Agenda <ul><li>Where it has started </li></ul><ul><li>What change can it bring? </li></ul><ul><li>Understanding the lingo </li></ul><ul><li>Basic usage </li></ul><ul><li>Drawing shapes </li></ul><ul><li>Using images </li></ul><ul><li>Applying styles and colors </li></ul><ul><li>Transformations </li></ul><ul><li>Compositing </li></ul><ul><li>Basic animations </li></ul>
  3. 3. History
  4. 4. Canvas vs SVG <ul><li>High performance </li></ul><ul><li>Everything is a pixel. </li></ul><ul><li>Save the resulting image as a .png or .jpg. </li></ul><ul><li>For generating raster graphics where pixel-level manipulation is needed. </li></ul><ul><li>Resolution independence </li></ul><ul><li>Elements can be animated using a declarative syntax, or via JavaScript. </li></ul><ul><li>Full control over each element </li></ul>
  5. 5. Lingo
  6. 6. What it is not
  7. 7. First kicks <canvas id=&quot;stockGraph&quot; width=&quot;150&quot; height=&quot;150&quot;> You browser doesn't support canvas. </canvas> var canvas = document.getElementById('tutorial'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); }
  8. 8. Basic shapes Rectangle : fillRect(x,y,width,height) strokeRect(x,y,width,height) clearRect(x,y,width,height) Circle: arc(x, y, radius, startAngle, endAngle, anticlockwise)
  9. 9. Paths beginPath() closePath() stroke() Fill() moveTo(x, y) lineTo(x, y)
  10. 10. Exercise - 1
  11. 11. Solution <ul><li>ctx.beginPath(); </li></ul><ul><li>ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle </li></ul><ul><li>ctx.moveTo(110,75); </li></ul><ul><li>ctx.arc(75,75,35,0,Math.PI,false); // Mouth(clockwise) </li></ul><ul><ul><li>ctx.moveTo(40,75); </li></ul></ul><ul><ul><li>ctx.lineTo(110,75); </li></ul></ul><ul><li>ctx.moveTo(65,65); </li></ul><ul><li>ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye </li></ul><ul><li>ctx.moveTo(95,65); </li></ul><ul><li>ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye </li></ul><ul><li>ctx.stroke(); </li></ul>
  12. 12. Beziere curves quadraticCurveTo(cp1x, cp1y, x, y) bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
  13. 13. Styling lineWidth = value lineCap = type lineJoin = type miterLimit = value fillStyle = color strokeStyle = color ctx.globalAlpha = 0...1; createLinearGradient(x1,y1,x2,y2) createRadialGradient(x1,y1,r1,x2,y2,r2) addColorStop(position, color) var ptrn =ctx.createPattern(img,'repeat'); ctx.fillStyle = ptrn;
  14. 14. Images var img = new Image(); img.src = 'myImage.png'; // Set source path OR Img = 'data:image/gif;base64,R0lGO......' drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
  15. 15. Transformations translate(x, y) rotate(alpha)
  16. 16. Compositing globalCompositeOperation = [type] ctx.beginPath(); drawAPath(); ctx.clip();
  17. 17. Animate <ul><li>Clear the canvas </li></ul><ul><li>Save the canvas state </li></ul><ul><li>Draw animated shapes </li></ul><ul><li>Restore the canvas state </li></ul>setInterval(animateShape,500); setTimeout(animateShape,500);
  18. 18. Canvas vs Flash

×