Summary of 24 basic canvas knowledge_html5 tutorial skills-H5 Tutorial-php.cn

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