Summary of 24 basic canvas knowledge_html5 tutorial skills

Now we summarize the knowledge points of canvas as follows for easy reference at any time.

1. Filled rectangle fillRect(x,y,width,height);

2. Draw a rectangular border strokeRect(x,y,width,height);

3. Erase rectangle clearRect(x,y,width,height);

4. Fill style fillStyle="red"; The style can be color, gradient and image.

5. Stroke style strokeStyle="red";

6. The width of the stroke line lineWidth=4;

7. Line end shape lineCap="butt"; butt/round/square, by default it is butt;

8. Line intersection style lineJoin="miter"; miter( sharp corner)/round(rounded corner)/bevel(bevel), 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 an arc arc(x,y,radius,startAngle,endAngle,true/false);

12. Draw an arc arcTo(x1,y1,x2,y2,radius) Draw an arc starting from the previous point, ending at x2, y2, and passing through it with the given radius. x1,y1;

13. moveTO(x,y); Move the drawing cursor to (x, y) without drawing a line

14. lineTo(x,y); Draw a straight line starting from the previous point

15. Quadratic Bezier Curve: quadraticCurveTo(cx,cy,x,y); Draw a quadratic curve starting from the previous point and ending at x, y. cx, cy are used as control points .

16. Cubic Bezier Curve: bezierCurveTo(cx1,cy1,cx2,cy2,x,y); Draw a quadratic curve starting from the previous point and ending at x, y, cx1, cy1 and cx2,cy2 as control points.

17. rect(x,y,width,height);Draw a rectangle starting from point x, y. The width and height are specified by width and height respectively. This method draws a rectangular path, not an independent shape.

18. Draw text:

　(1) Fill text: fillText("hello",x,y,width); width is the optional maximum pixel width. If the text is larger than the maximum width, the text will shrink to fit 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 on 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, ideographic, bottom. Default value: alphabetic. Align on 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); the parameter text is the text to be drawn

19. Transformation

　(1) rotate(angle): Rotate the image angle 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 executing this transformation, the coordinates 0,0 will Becomes the point previously represented by x, y. You can also use transform(1,0,0,1,x,y);
　(4) transform(, , ,,x, y) ;
　(5) setTransform(, , ,,x, y);Reset the transformation matrix to the default state, and then call transform();

20. Graphic combination

Copy code

The code is as follows:

context.fillStyle="blue";
context.fillRect(10,10,100,100);
context.globalCompositeOperation='lighter'; Optional values ​​are as in /* */.
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 graphic
source-in: perform an in operation between the new graphic and the original graphic, and only display the difference between the new graphic and the original graphic Overlapping parts of graphics
destination-in: The original graphics and the new graphics are operated as in, and only the parts of the new graphics that overlap with the original graphics are displayed
source-out: The new graphics and the original graphics are operated as out Operation, only display the parts of the new graphic that do not overlap with the original graphic
destination-out: Perform out operation on the new graphic and the original graphic, only display the parts of the new graphic that do not overlap with the original graphic
source- atop: Draw only the part of the new shape that overlaps the original shape and the original shape that is not overlapped
destination-atop: Draw only the part of the original shape that is overlapped by the new shape and other parts of the new shape
lighter: both the original shape and the new shape are drawn, and the overlapping parts are colored.
>*/

21. Draw graphics shadows

Copy codeThe code is as follows:

context.shadowOffsetX=10; //Shadow The horizontal displacement of the shadow

context.shadowOffsetY=10; //The vertical displacement of the shadow
context.shadowColor='rgba(100,100,100,0.5)'; //The color of the shadow
context.shadowBlur=7; //Blurred range of shadow

22. Draw, tile, and crop images

Copy codeThe 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 height of the copied area of ​​the source image, dx, dy and dw, dh are the target coordinates and height of the copied area.
context.createPattern(image,type); Image tiles, parameters can be: no-repeat,repeat-x,repeat-y,repeat;
context.clip(); //Crop function

Example:

Copy codeThe code is as follows:

image=new Image(); // Create an Image object

image.src="../images/wukong.gif";
var test=context.createPattern(image,'repeat-y');//createPattern sets the tiling effect,
context.fillStyle=test;
context.fillRect(0,0,400,400);
image.onload=function() { //The purpose of this method is to prevent the image from being processed if the image is a relatively large network image file. You won't see the image until everything is loaded, so you can draw while loading.
drawImg(context,image);
}
function drawImg(context,image){
//Draw the original image
context.drawImage(image,10,10,125,125);
//Local enlargement
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 and restore

contex.save(); Save the current state to the stack. Note: What is saved is only the settings and transformations of the drawn graphics, not the content of the drawn graphics.

context.restore(); retrieve the previously saved graphics state from the stack

Applicable occasions:
(1) Image or graphics deformation
(2) Image cropping
(3) When changing the properties of the graphics context: fillStyle, font, globalAlpha, globalComposite-Operation, lineCap, lineJoin, lineWidth, miterLimit, shadowBlur, shadowColor,
shadowOffsetX, shadowOffsetY, strokeStyle, textAlign, textBaseline

24. Linear gradient

Copy codeThe 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);