html5 canvas drawing and animation

42
HTML Presenter: Ashim Das, Mindfire Solutions Skype: mfsi_ashim Canvas 5 Drawing and Animation

Upload: mindfire-solutions

Post on 27-Aug-2014

499 views

Category:

Software


17 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Html5 Canvas Drawing and Animation

HTML Presenter: Ashim Das, Mindfire SolutionsSkype: mfsi_ashim

Canvas5Drawing and Animation

Page 2: Html5 Canvas Drawing and Animation

The Canvas Element

Page 3: Html5 Canvas Drawing and Animation

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

Page 4: Html5 Canvas Drawing and Animation

The Canvas APICanvas attributeswidthheight

Canvas methodsgetContext()toDataURL(type, quality)toBlob(callback, type, args...)

Page 5: Html5 Canvas Drawing and Animation

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

Page 6: Html5 Canvas Drawing and Animation

Event HandlingMouse Eventscanvas.onmousedown = function(e) {

//mouse down event reaction};

or

canvas.addEventListener('mousedown', function(e) {//mouse down event reaction

});

Page 7: Html5 Canvas Drawing and Animation

Event HandlingKeyboard EventsKey Eventskeydownkeypresskeyup

var key = String.fromCharCode(event.which);

Touch Eventstouchstarttouchmovetouchendtouchcancelcanvas.ontouchstart = function(e) {….....

Page 8: Html5 Canvas Drawing and Animation

Invisible HTML ElementsRubber band with a floating div

Printing a canvasUsing toDataURL() to print a canvas

Page 9: Html5 Canvas Drawing and Animation

Drawing

Page 10: Html5 Canvas Drawing and Animation

The Coordinate System

Page 11: Html5 Canvas Drawing and Animation

TransformationTranslateRotateScaleCreate custom transformations, such as shear

Page 12: Html5 Canvas Drawing and Animation

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.

Page 13: Html5 Canvas Drawing and Animation

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

Page 14: Html5 Canvas Drawing and Animation

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)

Page 15: Html5 Canvas Drawing and Animation

PatternscreatePattern(HTMLImageElement | HTMLCanvasElement | HTMLVideoElement image, DOMString repetition)

Page 16: Html5 Canvas Drawing and Animation

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

Page 17: Html5 Canvas Drawing and Animation

Paths, Stroking, and Filling

Page 18: Html5 Canvas Drawing and Animation

Cutouts

Page 19: Html5 Canvas Drawing and Animation

LinesmoveTo(x, y)lineTo(x, y)

Drawing a Grid

Page 20: Html5 Canvas Drawing and Animation

Rubberband Lines

Dashed Lines

Page 21: Html5 Canvas Drawing and Animation

Line Caps and Joins

Page 22: Html5 Canvas Drawing and Animation

Arcs and Circlesarc(x, y, radius, startAngle, endAngle, counterClockwise)

Rubberband CirclesRounded Rectangles (the arcTo() method)

Page 23: Html5 Canvas Drawing and Animation

Dials and Gauges

Page 24: Html5 Canvas Drawing and Animation

Bezier Curves

Rounded corners with bezier curves

quadraticCurveTo(double cpx, double cpy, double x, double y)

Page 25: Html5 Canvas Drawing and Animation

Cubic CurvesbezierCurveTo(double cpx, double cpy, double cp2x, double cp2y, double x, double y)

Page 26: Html5 Canvas Drawing and Animation

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)

Page 27: Html5 Canvas Drawing and Animation

Text

Page 28: Html5 Canvas Drawing and Animation

rotate(double angleInRadians)scale(double x, double y)translate(double x, double y)

Methods

PropertiesfonttextAligntextBaseline

Page 29: Html5 Canvas Drawing and Animation

Stroking and Filling Text

Page 30: Html5 Canvas Drawing and Animation

Text Patterns and Gradients

Page 31: Html5 Canvas Drawing and Animation

Setting Font Propertiesfont-stylefont-variantfont-weightfont-sizeline-heightfont-family

Page 32: Html5 Canvas Drawing and Animation

Positioning TexttextAligntextBaseline

Page 33: Html5 Canvas Drawing and Animation

Text around arcs

Page 34: Html5 Canvas Drawing and Animation

Text cursors

Page 35: Html5 Canvas Drawing and Animation

Animation

Page 36: Html5 Canvas Drawing and 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)

Page 37: Html5 Canvas Drawing and Animation

Portable Animation loopThe requestAnimationFrame() polyfill

Page 38: Html5 Canvas Drawing and Animation

Scrolling Backgrounds

Page 39: Html5 Canvas Drawing and Animation

Parallax

Page 40: Html5 Canvas Drawing and Animation

Timed Animation

Page 41: Html5 Canvas Drawing and Animation

Thank You

Page 42: Html5 Canvas Drawing and Animation

www.mindfiresolutions.com