24 Canvas Basic Knowledge Summary

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); Draws the rectangle from the point x,y, with width and height specified respectively. 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 (<NUMBER>, <number>, <number>,<number>,x, y);
(5) SetTransform (<number>, <number>, <number>,<number>,x, y); Reset the transformation matrix to the default state, and then call 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 show the new graphics overlap with the original image of the part


destination-in: The original and new graphics are in operation, showing only the parts of the new graphic that overlap with the original graphics


source-out: New graphics and original graphics for out operations, only show the new graphics do not overlap with the original graphic parts


destination-out: New graphics and original graphics for out operations, only show the new graphics do not overlap with the original graphic parts


source-atop: Only the parts of the new graphic that overlap with the original graphic and the original graphics that were not overlapped are plotted


destination-atop: Only parts of the original graphic that overlap the new graphic and other parts of the new graphic are drawn


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


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


copy: Only draw new graphics


*/

21, draw the shadow of the graph

The

code is as follows:


context.shadowoffsetx=10; Lateral displacement of shadow


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


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


context.shadowblur=7; Fuzzy 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 copied region of 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 (); Cutting 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 setting 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 all of the images are loaded, so that it can be plotted 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);