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

Intro to HTML5 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
Drawing with the HTML5 Canvas
Drawing with the HTML5 Canvas
Carregando em…3
×

Confira estes a seguir

1 de 32 Anúncio

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Semelhante a Intro to HTML5 Canvas (20)

Anúncio

Mais recentes (20)

Anúncio

Intro to HTML5 Canvas

  1. 1. Intro to HTML5 Canvas Juho Vepsäläinen
  2. 2. Gonna Talk About These Topics You Betcha Canvas (Overview) Canvas 2D Context (The Beefcake) Canvas Tricks (For Fun and Profit) Canvas Demos (To Recap Concepts Discussed)
  3. 3. Canvas Overview
  4. 4. http://dev.w3.org/html5/2dcontext/ Just Google it. :)
  5. 5. Definition Immediate-mode API and associated utility methods for drawing two-dimensional vector graphics to a raster drawing area. Draw and forget API and utils for 2D drawing.
  6. 6. Markup <canvas></canvas> <canvas width="800" height="600"></canvas> <canvas width="800" height="600">No canvas for you!</canvas>
  7. 7. Element Access Attributes: width, height Method: getContext (for drawing), toDataURL (for saving)
  8. 8. Show some apps and libs now.
  9. 9. Canvas 2D Context The Beefcake
  10. 10. Get Some Context var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d");
  11. 11. Context Functionality It's a state machine Read-only ref back to canvas (attr) save/restore + ops Ops: transformations, compositing, colors and styles, line caps/joins, shadows, rects, paths, text, drawing images, pixel manipulation + misc. crud I won't cover
  12. 12. Context for Dummies 1. Set some states (transformation, color, ie.) 2. Draw (lines, whatnot) 3. ??? 4. Profit
  13. 13. Default Context (0, 0) x y
  14. 14. Transformed Context (0, 0) x ctx.scale(x, y) ctx.rotate(rad) ctx.translate(x, y) y ctx.transform/setTransform(a,b,c,d,e,f) (set resets)
  15. 15. Compositing ctx.globalAlpha = 0.38; ctx.globalCompositeOperation = "source-over";
  16. 16. Colors and Styles - stroke/ fill ctx.strokeStyle = "black"; ctx.fillStyle = "yellow";
  17. 17. Colors and Styles - Gradients ctx.createLinearGradient(x0,y0,x1,y1) ctx.createRadialGradient(x0,y0,r0,x1,y1,r1) ctx.addColorStop(offset, color);
  18. 18. Colors and Styles - Patterns ctx.createPattern(catImg, 'repeat-x');
  19. 19. Line Caps/Joins ctx.lineWidth = 12; ctx.lineCap = "square"; ctx.lineJoin = "miter"; ctx.miterLimit = 10;
  20. 20. Shadows ctx.shadowOffsetX = 5; ctx.shadowOffsetY = 5; ctx.shadowBlur = 3; ctx.shadowColor = 'grey';
  21. 21. Rectangles ctx.clearRect/fillRect/strokeRect(x,y,w,h)
  22. 22. Paths ctx.beginPath(); ctx.moveTo(x, y); // initial pos // define curve ctx.lineTo/quadraticCurveTo/bezierCurveTo/ arcTo/arc/rect ... ctx.closePath(); ctx.fill/stroke/clip();
  23. 23. Text ctx.font = "24px sans-serif "; ctx.textAlign = "center"; ctx.fillText/strokeText(text,x,y,maxWidth);
  24. 24. Drawing Images ctx.drawImage(img/canvas/video, lots of alternatives); Supports compositing! Use this to your advantage.
  25. 25. Pixel Manipulation ctx.createImageData/getImageData/putImageData var data = ctx.getImageData(0, 0, w, h); var realData = data.data; for(var y = 0, pos = 0; y < h; y++) { for(var x = 0; x < w; x++, pos+=4) { realData[pos + 2] *= 0.5; // modify Blue channel } } data.data = realData; Friggin' slow! Avoid if possible. Optimize usage.
  26. 26. Canvas Tricks For Fun and Profit
  27. 27. Blurred Lines Basic idea: Use line shadow, offset actual line so that it isn't visible.
  28. 28. Multiple Layers Basic idea: CSS z-index + absolute positioning.
  29. 29. Erasing Basic idea: Use destination-out compositing op.
  30. 30. CSS Fun Basic idea: Play around with CSS opacity and transformations (incurs perf penalty).
  31. 31. Canvas Demos To recap concepts discussed
  32. 32. Demo time.

×