Downloaded 34 times
Uploaded byMindfire Solutions
Html5 Canvas Drawing and Animation
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.
More Related Content
Similar to Html5 Canvas Drawing and Animation
Html5 Canvas Drawing and Animation
- 1. Canvas5 Drawing andAnimation HTML Presenter: Ashim Das, Mindfire Solutions Skype: mfsi_ashim Date: 13/11/2013
- 2.
- 3.
- 4. Use document.getElementById() toget 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 MouseEvents canvas.onmousedown = function(e) { //mouse down event reaction }; or canvas.addEventListener('mousedown', function(e) { //mouse down event reaction });
- 8. Event Handling KeyboardEvents 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.
- 11.
- 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(doublex, 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: aCSS3 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, andFilling
- 19.
- 20. Lines moveTo(x, y) lineTo(x, y) Drawing a Grid
- 21.
- 22. Line Caps andJoins
- 23. Arcs and Circles arc(x, y, radius, startAngle, endAngle, counterClockwise) Rubberband Circles Rounded Rectangles (the arcTo() method)
- 24.
- 25. Bezier Curves quadraticCurveTo(double cpx, double cpy, double x, double y) Rounded corners with bezier curves
- 26. Cubic Curves bezierCurveTo(doublecpx, 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.
- 29. Methods rotate(double angleInRadians) scale(double x, double y) translate(double x, double y) Properties font textAlign textBaseline
- 30.
- 31. Text Patterns andGradients
- 32. Setting Font Properties font-style font-variant font-weight font-size line-height font-family
- 33. Positioning Text textAlign textBaseline
- 34.
- 35.
- 36.
- 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
- 39.
- 40.
- 41.
- 42.