Intro to HTML5 Canvas

  • Published on
    10-May-2015

  • View
    3.710

  • Download
    2

Embed Size (px)

DESCRIPTION

Brief introduction to HTML5 Canvas. Libs: https://github.com/bebraw/jswiki/wiki (multimedia, graphics). Demos: http://jsdo.it/bebraw/codes

Transcript

<ul><li>1.Intro to HTML5 Canvas Juho Vepslinen</li></ul> <p>2. Gonna Talk About TheseTopics You BetchaCanvas (Overview)Canvas 2D Context (The Beefcake)Canvas Tricks (For Fun and Prot)Canvas Demos (To Recap Concepts Discussed) 3. CanvasOverview 4. http://dev.w3.org/html5/2dcontext/Just Google it. :) 5. DenitionImmediate-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. Markup No canvas for you! 7. Element AccessAttributes: width, heightMethod: getContext (for drawing), toDataURL (forsaving) 8. Show some apps and libs now. 9. Canvas 2D ContextThe Beefcake 10. Get Some Contextvar canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d"); 11. Context FunctionalityIts a state machineRead-only ref back to canvas (attr)save/restore + opsOps: transformations, compositing, colors and styles,line caps/joins, shadows, rects, paths, text, drawingimages, pixel manipulation + misc. crud I wont cover 12. Context for Dummies1. Set some states (transformation, color, ie.)2. Draw (lines, whatnot)3. ???4. Prot 13. Default Context(0, 0) xy 14. Transformed Context(0, 0)x ctx.scale(x, y) ctx.rotate(rad) ctx.translate(x, y)yctx.transform/setTransform(a,b,c,d,e,f) (set resets) 15. Compositingctx.globalAlpha = 0.38;ctx.globalCompositeOperation = "source-over"; 16. Colors and Styles - stroke/ llctx.strokeStyle = "black"; ctx.llStyle = "yellow"; 17. Colors and Styles - Gradientsctx.createLinearGradient(x0,y0,x1,y1)ctx.createRadialGradient(x0,y0,r0,x1,y1,r1) ctx.addColorStop(oset, color); 18. Colors and Styles - Patternsctx.createPattern(catImg, repeat-x); 19. Line Caps/Joinsctx.lineWidth = 12;ctx.lineCap = "square";ctx.lineJoin = "miter";ctx.miterLimit = 10; 20. Shadowsctx.shadowOsetX = 5;ctx.shadowOsetY = 5;ctx.shadowBlur = 3;ctx.shadowColor = grey; 21. Rectanglesctx.clearRect/llRect/strokeRect(x,y,w,h) 22. Pathsctx.beginPath();ctx.moveTo(x, y); // initial pos// dene curvectx.lineTo/quadraticCurveTo/bezierCurveTo/arcTo/arc/rect...ctx.closePath();ctx.ll/stroke/clip(); 23. Textctx.font = "24px sans-serif ";ctx.textAlign = "center";ctx.llText/strokeText(text,x,y,maxWidth); 24. Drawing Images ctx.drawImage(img/canvas/video, lots of alternatives);Supports compositing! Use this to your advantage. 25. Pixel Manipulationctx.createImageData/getImageData/putImageDatavar data = ctx.getImageData(0, 0, w, h);var realData = data.data;for(var y = 0, pos = 0; y &lt; h; y++) {for(var x = 0; x &lt; w; x++, pos+=4) { realData[pos + 2] *= 0.5; // modify Blue channel}}data.data = realData;Friggin slow! Avoid if possible. Optimize usage. 26. Canvas TricksFor Fun and Prot 27. Blurred LinesBasic idea: Use line shadow, oset actual lineso that it isnt visible. 28. Multiple LayersBasic idea: CSS z-index + absolute positioning. 29. ErasingBasic idea: Use destination-out compositing op. 30. CSS FunBasic idea: Play around with CSS opacityand transformations (incurs perf penalty). 31. Canvas DemosTo recap concepts discussed 32. Demo time. </p>