Upload
mindfire-solutions
View
518
Download
17
Embed Size (px)
DESCRIPTION
Citation preview
HTML Presenter: Ashim Das, Mindfire SolutionsSkype: mfsi_ashim
Canvas5Drawing and Animation
The Canvas Element
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
The Canvas APICanvas attributeswidthheight
Canvas methodsgetContext()toDataURL(type, quality)toBlob(callback, type, args...)
The Canvas ContextAlthough 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 attributescanvas miterLimitfillStyle shadowBlurfont shadowColorglobalAlpha shadowOffsetXglobalComposite-Operation shadowOffsetYlineCap strokeStylelineWidth textAlignlineJoin textBaseline
Event HandlingMouse Eventscanvas.onmousedown = function(e) {
//mouse down event reaction};
or
canvas.addEventListener('mousedown', function(e) {//mouse down event reaction
});
Event HandlingKeyboard EventsKey Eventskeydownkeypresskeyup
var key = String.fromCharCode(event.which);
Touch Eventstouchstarttouchmovetouchendtouchcancelcanvas.ontouchstart = function(e) {….....
Invisible HTML ElementsRubber band with a floating div
Printing a canvasUsing toDataURL() to print a canvas
Drawing
The Coordinate System
TransformationTranslateRotateScaleCreate custom transformations, such as shear
The Drawing ModelDraws 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.
Drawing RectanglesclearRect(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
GradientsLinear Gradients
Radial Gradients
createLinearGradient(double x0, double y0, double x1, double y1)
createRadialGradient(double x0, double y0, double r0, double x1, double y1, double r1)
PatternscreatePattern(HTMLImageElement | HTMLCanvasElement | HTMLVideoElement image, DOMString repetition)
ShadowsshadowColor: a CSS3 colorshadowOffsetX: the horizontal offset in pixels from shape
or text to the shadowshadowOffsetY: the vertical offset in pixels from shape or
text to the shadowshadowBlur: a value, used in a Gaussian blur equation to
smear the shadow
Inset ShadowsNegative values in OffSet
Paths, Stroking, and Filling
Cutouts
LinesmoveTo(x, y)lineTo(x, y)
Drawing a Grid
Rubberband Lines
Dashed Lines
Line Caps and Joins
Arcs and Circlesarc(x, y, radius, startAngle, endAngle, counterClockwise)
Rubberband CirclesRounded Rectangles (the arcTo() method)
Dials and Gauges
Bezier Curves
Rounded corners with bezier curves
quadraticCurveTo(double cpx, double cpy, double x, double y)
Cubic CurvesbezierCurveTo(double cpx, double cpy, double cp2x, double cp2y, double x, double y)
Transformationsrotate(double angleInRadians)scale(double x, double y)translate(double x, double y)
Custom Transformationstransform(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)
Text
rotate(double angleInRadians)scale(double x, double y)translate(double x, double y)
Methods
PropertiesfonttextAligntextBaseline
Stroking and Filling Text
Text Patterns and Gradients
Setting Font Propertiesfont-stylefont-variantfont-weightfont-sizeline-heightfont-family
Positioning TexttextAligntextBaseline
Text around arcs
Text cursors
Animation
The requestAnimationFrame() methodfunction animate(time) {// Update and draw animation objectsrequestAnimationFrame(animate); // Sustain the animation}...requestAnimationFrame(animate); // Start the animation
long window.requestAnimationFrame(FrameRequestCallback callback)void window.cancelRequestAnimationFrame(long handle)
Portable Animation loopThe requestAnimationFrame() polyfill
Scrolling Backgrounds
Parallax
Timed Animation
Thank You
www.mindfiresolutions.com