Canvas
Download as PPT, PDF•0 likes•581 views
Canvas allows for pixel-level drawing and animation capabilities within HTML5. It provides an API for rendering graphics on a <canvas> element using JavaScript. Key features include drawing basic shapes, applying styles/colors, image manipulation, and transformations. Animations can be created by clearing and redrawing the canvas at intervals or on timeouts. Canvas is optimized for raster graphics with full pixel control, while SVG is better suited for vector/scalable shapes.
![Compositing globalCompositeOperation = [type] ctx.beginPath(); drawAPath(); ctx.clip();](https://image.slidesharecdn.com/canvas-110407001653-phpapp01/85/Canvas-16-320.jpg)
Canvas
- 1. HTML-5 Canvas
- 2. Agenda Where it has started What change can it bring? Understanding the lingo Basic usage Drawing shapes Using images Applying styles and colors Transformations Compositing Basic animations
- 3. History
- 4. Canvas vs SVG High performance Everything is a pixel. Save the resulting image as a .png or .jpg. For generating raster graphics where pixel-level manipulation is needed. Resolution independence Elements can be animated using a declarative syntax, or via JavaScript. Full control over each element
- 5. Lingo
- 6. What it is not
- 7. First kicks <canvas id="stockGraph" width="150" height="150"> You browser doesn't support canvas. </canvas> var canvas = document.getElementById('tutorial'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); }
- 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. Paths beginPath() closePath() stroke() Fill() moveTo(x, y) lineTo(x, y)
- 10. Exercise - 1
- 11. Solution ctx.beginPath(); ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle ctx.moveTo(110,75); ctx.arc(75,75,35,0,Math.PI,false); // Mouth(clockwise) ctx.moveTo(40,75); ctx.lineTo(110,75); ctx.moveTo(65,65); ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye ctx.moveTo(95,65); ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye ctx.stroke();
- 12. Beziere curves quadraticCurveTo(cp1x, cp1y, x, y) bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
- 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. 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. Transformations translate(x, y) rotate(alpha)
- 16. Compositing globalCompositeOperation = [type] ctx.beginPath(); drawAPath(); ctx.clip();
- 17. Animate Clear the canvas Save the canvas state Draw animated shapes Restore the canvas state setInterval(animateShape,500); setTimeout(animateShape,500);
- 18. Canvas vs Flash