HTML Canvas (2)

5.3 Bezier Curve5.3.12 times Bezier Curve

Context.quadraticcurveto (Cp1x,cp1y,x,y);

Cp1x and cp1y are the coordinates of the control points, and X and Y are the focal coordinates.

5.3.23 Times Bezier Curve

Context.beziercurveto (Cp1x,cp1y,cp2x,cp2y,x,y);

The first four parameters are the coordinates of the primary and the second control points respectively, and X and Y are the end coordinates

5.4 Transformation of images5.4.1 Save and restore Cancas status (example007)

The canvas state is a snapshot of all styles, deformations, and cropping of the current screen, saved as a heap (stack).

Context.save (); Save state

Context.restore (); Recovery status

5.4.2 Moving coordinate space

The coordinate origin of the canvas is the origin by default in the upper-left corner (0,0), and the coordinate space can be moved using the Translate method. Before the image changes, it is best to save the current state with Save, and in many cases it is quicker to restore it directly using the Restore method.

Context.translate (Dx,dy);

DX and DY are the offsets of the origin along the horizontal right and vertical downward.

5.4.3 Rotating Coordinate space

Context.rotate (angle);

There is only one parameter, that is, the rotation angle, in clockwise direction, in radians, and the center of rotation as the origin of the coordinates.

5.4.4 zooming a graphic

Context.scale (x, y);

By increasing or decreasing the number of pixels, to achieve scaling, x and y are scaling factors, must be positive, the magnification is greater than 1, smaller is less than 1, equal to 1 no effect. (Can realize the spiral size transform of the graph)

5.4.5 Matrix Transformation

Context.transform (M11,m12,m21,m22,dx,dy);

X ' = (M11) x+ (M21) Y+DX

Y ' = (M12) x+ (M22) y+dy

1=1

(1) Mobile: 0,1,0,1,dx,dy (2) Scaling: m11,0,0,m22,0,0 (3) Rotation: cos,sin,-sin,cos,0,0

5.5 Combination of graphics transformation and crop 5.5.1 graphics golbalCompositeOperation5.5.2 clipping path clip

5.6 More colors and styling options 5.6.1 Linetype

LineWidth: Line Thickness

LineCap: End Style

LineJoin: Style at connection

Miterlimit: Intersection mode

5.6.2 linear gradient creatlineargradient (x1,y1,x2,y2) 5.6.3 radial gradient creatradialgradient (X1,Y1,R1,X2,Y2,R2) 5.6.4 drawing pattern Createpattern (Image,type)

The object referenced by type is a tiled type

Repeat: Tile at the same time along the X y-axis

REPEAT-X:X Tile

Repeat-y:y Tile

No-repeat: Uneven Shop

5.6.5 set the transparency of the graphic RGBA (r,g,b,a) 5.6.6 Shadow

SHADOWOFFSETX: Horizontal offset of Shadow, default 0, positive value right

Shadowoffsety: Vertical offset, 0, bottom

Shadowblur: Feather level, default 0

Shadowcolor: Color, can contain transparency settings, default black

5.7 Drawing text 5.7.1 fill text

Context.filltext (Text,x,y,[max Width]);

Text: string x, Y: Horizontal ordinate of the drawn text max width: Maximum widths for drawing text display

5.7.2 Text Properties

Font: style, same as CSS specified style

TextAlign: Specifies the alignment of the text being drawn. Left Right center start end

Textbaseline: Specifies the baseline of the text being drawn

5.7.3 Outline Text

Context.stroketext (Text,x,y,[max Width]);

5.7.4 Measuring text width

var a = Context.measuretext (text);

Specific values are expressed in a.width

5.8 Manipulating and using image 5.8.1 to introduce images

var img = new Image ();

IMG.SRC = ' image1.png ';

Pre-loading of images using onload and DrawImage

5.8.2 Changing the image size

DrawImage (Image,x,y,width,heigh);

The latter two parameters are the width and height displayed in the canvas

5.8.3 doing image slicing ()

DrawImage (IMAGE,SX,SY,SW,SH,DX,DY,DW,DH); Parameters

HTML Canvas (2)