HTML5 Canvas Core technology-graphics, animation and game development. Pdf4

Methods for translating and rotating coordinate systems in canvasrenderingcontext2d objects

Mirror

Scale (1,-1) draws a vertical image; scale ( -1,1) draws a horizontal mirror

Custom Coordinate transformations

Transform (), multiple calls will overlay the effect

SetTransform (), each call clears the last effect

Two methods are used to rotate, scale, and translate the coordinate system (0 or other data can be passed in according to a formula)

X ' =ax+cy+e

Y ' =bx+dy+f

Coordinate system rotation formula (angle radians)

X ' =xxcos (angle)-(Yxsin (angle))

Y ' =yxcos (angle) + (Xxsin (angle))

Translation

X ' =X+DX

Y ' =y+dy

Scaling

X ' =XXSX

Y ' =yxsy

Wrong Cut (parallelogram)

X ' =x+by

Y ' =y

Image synthesis

The canvas element has a globalcompositeoperation property that alters the default image compositing behavior

context.globalcompositeoperation= ' souce-in ';

Clipping region

Set an area that is valid only for operations within this area, before the clip () method, the clipping region is the entire canvas element

3rd Chapter Text

A canvas drawing object provides 3 text-related methods

Stroketext (text,x,y) optional 4th parameter, specifying the maximum width of the text, exceeding the compression

Filltext (text,x,y) optional 4th parameter, specifying the maximum width of the text, exceeding the compression

Measuretext (text), the returned object contains a Width property that indicates how wide the text you pass to the method occupies

There are three text-related properties in a canvas drawing environment object: Font textAlign textbaseline

Set font properties

Canvas default font is 10px Sans-serif, other values default to normal

The Font property of the drawing environment object also supports the font syntax of the CSS3 format, except for properties specific to the style sheet syntax (such as inherit or initial, etc.), which silently fail when encountered, and the setting of the Line-height property in the canvas is ignored