Canvas Knowledge Points Summary 1

1.Filled Rectangle fillRect (x,y,width,height);
2.Draw Rectangle Border Strokerect (x,y,width,height);
3.Erase Rectangle Clearrect (x,y,width,height);
4.Fill style fillstyle= "red"; Styles can be colors, gradients, and images.
5.Stroke style strokestyle= "red";
6.The width of the stroke line linewidth=4;
7.Line End shape linecap= "butt"; Butt (docking)/round (round)/square (square), by default is butt;
8.Line intersection style linejoin= "miter"; Miter (sharp angle)/round (fillet)/bevel (bevel), default sharp angle;
9.Start drawing path Beginpath ();
10.End Path Closepath (); After creating the path, if you want to draw a line connected to the beginning of the path, you can call Closepath ();
11.Draw Arc Arc (X,Y,RADIUS,STARTANGLE,ENDANGLE,TRUE/FALSE);
12.Draw Arc ArcTo (X1,y1,x2,y2,radius) draws a day arc from the previous point, to X2,y2, and radius through x1,y1 with a given radius;
13.MoveTO (x, y); Move a drawing cursor to (x, y) without drawing a line
14.LineTo (x, y); Draw a line from the previous point
15.Quadratic Bezier curve: Quadraticcurveto (cx,cy,x,y); Draw two curves from the previous point and cx,cy as control points until X, Y.
16.Three times Bezier curve: Beziercurveto (cx1,cy1,cx2,cy2,x,y); Draw two curves from the previous point, to X, Y, Cx1,cy1 and cx2,cy2 as control points.
17.Rect (x,y,width,height); the rectangle is drawn from point x, Y, and width and height are specified by widths and heights, respectively. This method draws a rectangular path, rather than an independent shape.
18. Draw Text:
(1) Fill text: Filltext ("Hello", x,y,width), width is the optional maximum pixel width, and if the text is larger than the maximum width, the text shrinks to fit the maximum width.
(2) Text stroke: Stroketext ("Hello", x,y,width), width as optional maximum pixel width.
(3) Text style: font= "bold 14px Arial";
(4) Horizontal text alignment: textalign= ' start ';//Start, end, Left,right, center. Default value: Start. Aligns the vertical axis with the starting point (x, y) of the text.
(5) Vertical text alignment: textbaseline= ' alphabetic ';//top, hanging, middle,alphabetic, ideographic, bottom. Default value: Alphabetic. Aligns the horizontal axis of the base point at the beginning of the text (x, y).
(6) Width of text: var text= "Hello"; var length=context.measuretext (text); argument text is the text you want to draw

19. Transformation
(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 X, Y, and after the transformation is performed, the coordinate 0,0 becomes the point previously indicated by X, Y. You can also use transform (1,0,0,1,x,y);
(4) transform (&LT;NUMBER&GT;, <number>, <number>,<number>,x, y);
(5) SetTransform (<number>, <number>, <number>,<number>,x, y); resets the transformation matrix to the default state, and then calls transform () ;
20. Graphic Combination
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 graphic under the original drawing
Source-in: New and existing graphics in the in operation, showing only the parts of the new drawing that overlap the original
Destination-in: The original and new graphics are in operation, showing only the parts of the new drawing that overlap the original shape
Source-out: The new shape and the original figure are out, showing only the parts of the new drawing that do not overlap the original.
Destination-out: The new shape and the original figure are out, showing only the parts of the new drawing that do not overlap the original.
Source-atop: Draw only the parts of the new drawing that overlap with the original and the original shapes that are not overlapped
Destination-atop: Draws only the parts of the original drawing that are overlapped by the new shape and other parts of the new drawing
Lighter: Both the original and the new graphics are drawn, overlapping parts are added color processing
XOR: Only the part of the new shape that does not overlap the original shape is drawn, and the overlapping parts become transparent
Copy: Draw only new graphics
*/
21. Drawing Shadows
Lateral displacement of context.shadowoffsetx=10;//shadow
Longitudinal displacement of context.shadowoffsety=10;//shadow
Context.shadowcolor= ' Rgba (100,100,100,0.5) ';//The Color of the shadow
context.shadowblur=7; Blur range of Shadows

Canvas Knowledge Points Summary 1