Html5 Canvas Drawing and Animation
Download as PPT, PDF6 likes2,406 views
This document discusses HTML canvas drawing and animation. It covers topics like getting a canvas reference, the canvas API, drawing shapes and text, applying transformations, using paths, gradients and patterns, handling events, and animating canvas content using requestAnimationFrame. The document provides details on various canvas methods, properties, and techniques for 2D drawing and basic animation.
Html5 Canvas Drawing and Animation
- 1. Canvas5 Drawing and Animation HTML Presenter: Ashim Das, Mindfire Solutions Skype: mfsi_ashim Date: 13/11/2013
- 2. Reference
- 4. Use document.getElementById() to get a reference to canvas Call getContext('2d') on the canvas to get the graphics context Use the context to draw in the canvas
- 5. The Canvas API Canvas attributes width height Canvas methods getContext() toDataURL(type, quality) toBlob(callback, type, args...)
- 6. The Canvas Context Although the context provides 2d graphics context, the Canvas specification embraces other types of contexts as well; for example, a 3d context specification is already well underway. CanvasRenderingContext2D attributes canvas miterLimit fillStyle shadowBlur font shadowColor globalAlpha shadowOffsetX globalComposite-Operation shadowOffsetY lineCap strokeStyle lineWidth textAlign lineJoin textBaseline
- 7. Event Handling Mouse Events canvas.onmousedown = function(e) { //mouse down event reaction }; or canvas.addEventListener('mousedown', function(e) { //mouse down event reaction });
- 8. Event Handling Keyboard Events Key Events keydown keypress keyup var key = String.fromCharCode(event.which); Touch Events touchstart touchmove touchend touchcancel canvas.ontouchstart = function(e) {….....
- 9. Invisible HTML Elements Rubber band with a floating div Printing a canvas Using toDataURL() to print a canvas
- 10. Drawing
- 12. Transformation Translate Rotate Scale Create custom transformations, such as shear
- 13. The Drawing Model Draws the shape or image into an infinite, transparent bitmap, honoring the current fill, stroke, and line styles. Draws the shadow from the shape or image into a second bitmap, using the current context shadow settings. Multiplies every shadow pixel's alpha component by the globalAlpha property of the context. Composites the shadow bitmap into the canvas clipped to the clipping region, using the current composition. Multiplies every pixel for the shape or image by the globalAlpha property of the context. Composites the shape or image bitmap into the clipping region over the current canvas bitmap, using the current composition operator.
- 14. Drawing Rectangles clearRect(double x, double y, double w, double h) strokeRect(double x, double y, double w, double h) fillRect(double x, double y, double w, double h) Colors and Transparency
- 15. Gradients Linear Gradients createLinearGradient( double x0, double y0, double x1, double y1) Radial Gradients createRadialGradient( double x0, double y0, double r0, double x1, double y1, double r1)
- 16. Patterns createPattern(HTMLImageElement | HTMLCanvasElement | HTMLVideoElement image, DOMString repetition)
- 17. Shadows shadowColor: a CSS3 color shadowOffsetX: the horizontal offset in pixels from shape or text to the shadow shadowOffsetY: the vertical offset in pixels from shape or text to the shadow shadowBlur: a value, used in a Gaussian blur equation to smear the shadow Inset Shadows Negative values in OffSet
- 18. Paths, Stroking, and Filling
- 19. Cutouts
- 20. Lines moveTo(x, y) lineTo(x, y) Drawing a Grid
- 21. Rubberband Lines Dashed Lines
- 22. Line Caps and Joins
- 23. Arcs and Circles arc(x, y, radius, startAngle, endAngle, counterClockwise) Rubberband Circles Rounded Rectangles (the arcTo() method)
- 24. Dials and Gauges
- 25. Bezier Curves quadraticCurveTo(double cpx, double cpy, double x, double y) Rounded corners with bezier curves
- 26. Cubic Curves bezierCurveTo(double cpx, double cpy, double cp2x, double cp2y, double x, double y)
- 27. Transformations rotate(double angleInRadians) scale(double x, double y) translate(double x, double y) Custom Transformations transform(double a, double b, double c, double d, double e, double f) setTransform(double a, double b, double c, double d, double e, double f)
- 28. Text
- 29. Methods rotate(double angleInRadians) scale(double x, double y) translate(double x, double y) Properties font textAlign textBaseline
- 30. Stroking and Filling Text
- 31. Text Patterns and Gradients
- 32. Setting Font Properties font-style font-variant font-weight font-size line-height font-family
- 33. Positioning Text textAlign textBaseline
- 34. Text around arcs
- 35. Text cursors
- 36. Animation
- 37. The requestAnimationFrame() method function animate(time) { // Update and draw animation objects requestAnimationFrame(animate); // Sustain the animation } ... requestAnimationFrame(animate); // Start the animation long window.requestAnimationFrame(FrameRequestCallback callback) void window.cancelRequestAnimationFrame(long handle)
- 38. Portable Animation loop The requestAnimationFrame() polyfill
- 40. Parallax
- 41. Timed Animation
- 42. Thank You