A summary of the basic knowledge of CSS24 canvas

The canvas knowledge points are summarized as follows so that they can be consulted at any time.

1, filled rectangular fillrect (x,y,width,height);

2, draw the rectangular frame strokerect (x,y,width,height);

3, Erase rectangular clearrect (x,y,width,height);

4, fill the style fillstyle= "red"; Styles can be colors, gradients, and images.

5, stroke style strokestyle= "red";

6, the Stroke line width linewidth=4;

7, Line End shape linecap= "butt"; Butt (Butt)/round (round)/square (square), by default, is butt;

8, line intersection style linejoin= "miter"; Miter (sharp angle)/round (rounded)/bevel (bevel), default sharp angle;

9, start to draw the path Beginpath ();

10, the end of the path Closepath (); When you create a path, you can call Closepath () if you want to draw a line that connects to the beginning of the path.

11. Draw Arc Arcs (x,y,radius,startangle,endangle,true/false);

12, Draw the Arc ArcTo (X1,y1,x2,y2,radius) from the previous point to draw a day arc, to X2,y2 so far, and at a given radius radius through the x1,y1;

13, MoveTO (X,y); Move a drawing cursor to (x,y) without drawing a line

14, LineTo (x,y); Start drawing a straight line from the top

15, two times Bezier curve: Quadraticcurveto (cx,cy,x,y); Draw the two-time curve from the top point to the X,y, cx,cy as the control point.

16, three times Bezier curve: Beziercurveto (cx1,cy1,cx2,cy2,x,y); Start by drawing the two-time curve from the top point, until X,y, Cx1,cy1 and Cx2,cy2 as control points.

17, Rect (x,y,width,height), starting from the point X,y draw the rectangle, width and height are respectively specified by widths and heights. This method draws a rectangular path, not a separate shape.

18. Draw the text:

(1) Fill text: Filltext ("Hello", x,y,width); width is the optional maximum pixel width, and if the text is greater than the maximum width, the text shrinks to fit the maximum width.

(2) Text stroke: Stroketext ("Hello", x,y,width); width is the optional maximum pixel width.

(3) Text style: "Bold 14px Arial";

(4) Horizontal text alignment: textalign= ' start '; Start, end, Left,right, center. Default value: Start. Aligns the longitudinal axes of the text starting point (x,y) as the basis.

(5) Vertical text alignment: textbaseline= ' alphabetic '; Top, hanging, middle,alphabetic, ideographic, bottom. Default value: Alphabetic. Aligns the horizontal axis of the starting point (x,y) of the text as the basis.

(6) Width of the text: var text= "Hello"; var length=context.measuretext (text), parameter text is the text you want to draw

19. Transform

(1) Rotate (angle): Rotates the image angle radians around the origin.

You can also use transform (Math.Cos (angle*math.pi/180), Math.sin (angle*math.pi/180),-math.sin (angle*math.pi/180), Math.cos ( angle*math.pi/180), 0,0);

(2) scale (X,y): Scales the image. You can also use transform (x,0,0,y,0,0);

(3) Translate (X,Y): The coordinate origin is moved to the X,y, and after this transformation, the coordinate 0,0 becomes the point represented by the x,y. You can also use transform (1,0,0,1,x,y);

(4) transform (,,,, X, y);

(5) SetTransform (,,,, X, y); resets the transformation matrix to the default state, and then calls transform ();

20. Graphic Combination

The code is as follows:

Context.fillstyle= "Blue";

Context.fillrect (10,10,100,100);

context.globalcompositeoperation= ' lighter '; Optional values such as/* */inside.

Context.fillstyle= "Red";

Context.arc (110,60,50,0,math.pi*2,false);

Context.fill ();

/*

Source-over (default value):

Destination-over: Draw a new shape under an existing graphic

Source-in: New graphics and original graphics in the operation, only to show the new graphics overlap with the original graphic parts

Destination-in: The original and new graphics in the operation, only to show the new graphics overlap with the original graphic parts

Source-out: New graphics and original graphics for out operations, only to show the new graphics and the original graphics do not overlap parts

Destination-out: New graphics and original graphics for out operations, only to show the new graphics and the original graphics do not overlap parts

Source-atop: Only the parts of the new graphic that overlap with the original and the original shapes that are not overlapped are plotted

Destination-atop: Plots only the parts of the original graphic that are overlapped by the new graphic and other parts of the new shape

Lighter: Original graphics and new graphics are drawn, overlapping parts do color processing

XOR: Only plots new and original graphics do not overlap parts, overlapping parts become transparent

Copy: Draw only new graphics

*/

21, draw the shadow of the graph

The code is as follows:

context.shadowoffsetx=10; Lateral displacement of shadows

context.shadowoffsety=10; The longitudinal displacement of a shadow

Context.shadowcolor= ' Rgba (100,100,100,0.5) '; The color of the shadow

context.shadowblur=7; Blur range of Shadows

22. Draw, tile, crop the image

The code is as follows:

Context.drawimage (Image,x,y);

Context.drawimage (IMAGE,X,Y,W,H);

Context.drawimage (IMAGE,SX,SY,SW,SH,DX,DY,DW,DH); Sx,sy and Sw,sh are the starting coordinates and heights of the replicated region for the source image, Dx,dy and DW,DH are the target coordinates and heights of the replicated area.

Context.createpattern (image,type); image tiling, parameters can be: no-repeat,repeat-x,repeat-y,repeat;

Context.clip (); cropping function

Example:

The code is as follows:

Image=new Image (); Create an Image Object

Image.src= ". /images/wukong.gif ";

var test=context.createpattern (image, ' repeat-y ');//createpattern set tile effect,

Context.fillstyle=test;

Context.fillrect (0,0,400,400);

Image.onload=function () {//The effect of this method is that if the picture is a larger network image file, the image is not visible until the image is fully loaded, so that it can be drawn on one side of the load.

Drawimg (Context,image);

}

function Drawimg (context,image) {

Draw the original image

Context.drawimage (image,10,10,125,125);

Local amplification

Context.drawimage (image,20,0,90,100,150,10,125,125);

Context.rect (20,20,80,80);

Context.clip ();

Context.drawimage (image,0,0,200,200);

}

23, Save, restore

Contex.save (); Saves the current state to the stack. Note: Only the settings and transformations for drawing graphics are saved, and the content of the drawing is not saved.

Context.restore (); Remove the saved graphic state from the stack

Can be applied to the occasion:

(1) image or graphic deformation

(2) Image cropping

(3) When changing the graphics context when the property: Fillstyle,font,globalalpha,globalcomposite-operation,linecap,linejoin,linewidth,miterlimit, Shadowblur,shadowcolor,

Shadowoffsetx,shadowoffsety,strokestyle,textalign,textbaseline

24, linear gradient

The code is as follows:

var g=context.createlineargradient (xstart,ystart,xend,yend);

var g1=context.createradialgradient (xstart,ystrat,radiusstrat,xend,yend,radiusend);

G.addcolorstop (0, ' red ');

G.addcolorstop (0, ' green ');

context.fillstyle=g;

Context.fillrect (0,0,200,200);