This article mainly introduces 24 basic knowledge summary of canvas, which is very comprehensive and detailed, and is recommended to everyone.
Now summarize the knowledge points of canvas as follows so that they can be read at any time.
1. Fill the rectangle fillRect(x,y,width,height); 2. Draw the rectangle border strokeRect(x,y,width,height); 3. Erase the rectangle clearRect(x,y,width,height); 4. FillStyle =red; The style can be color, gradient and image. 5. StrokeStyle =red; 6. The width of the stroke line lineWidth=4; 7. The shape of the end of the line lineCap=butt; butt(docking)/round(circle)/square(square), by default it is butt; 8. Line intersection style lineJoin=miter; miter (sharp corner)/round (rounded corner)/bevel (bevel corner), default sharp corner; 9. Start drawing the path beginPath(); 10. End the path closePath(); After creating the path, if you want to draw a line connected to the starting point 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) starts to draw an arc of one day from the previous point, until x2,y2, and pass through x1,y1 with the given radius; 13. moveTO(x,y); move the drawing cursor to (x,y), without drawing lines 14. lineTo(x,y); draw a straight line from the previous point 15. Quadratic Bezier curve: quadraticCurveTo(cx,cy,x,y); start drawing the quadratic curve from the previous point, until x,y, cx,cy serves as the control point. 16. Cubic Bezier curve : bezierCurveTo(cx1,cy1,cx2,cy2,x,y); start drawing the quadratic curve from the previous point, until x,y, cx1, cy1 and cx2,cy2 are used as control points. 17. rect(x,y,width,height); start from the points x,y, and the width and height are specified by width and height respectively. This method draws a rectangular path, not a separate shape. 18. Draw text:(1) Fill text: fillText(hello,x,y,width);width is the optional maximum pixel width. If the text is greater than the maximum width, the text will shrink to accommodate the maximum width.
(2) Text stroke: strokeText(hello,x,y,width);width is the 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. Align the vertical axis with the starting point (x,y) of the text as the base point.
(5) Vertical text alignment: textBaseline='alphabetic';//top, hanging, middle,alphabetic, ideagraphic, bottom. Default value: alphabetic. Align the horizontal axis with the starting point (x,y) of the text as the base point.
(6) Text width: var text=hello; var length=context.measureText(text); parameter text is the text that needs to be drawn
19. Change
(1) rotate(angle): Rotate the angle radian of the image 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): Scale the image. You can also use transform(x,0,0,y,0,0);
(3) translate(x,y): Move the coordinate origin to x,y. After performing this transformation, coordinates 0 and 0 will become the point represented by x,y before. You can also use transform(1,0,0,1,x,y);
(4) transform(<number>, <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 Copy the code