Detailed explanation of the properties of canvas lines

Values: butt (default value), round, square

 var canvas=document.getElementById(canvas);canvas.width=800;canvas.height=800;var context=canvas.getContext(2d);context.lineWidth=40;context.strokeStyle=#005588;//Three beginpath() draw three parallel lines context.beginPath();context.moveTo(100,200);co ntext.lineTo(700,200);context.lineCap=butt;context.stroke();context.beginPath();context.moveTo(100,400);context.lineTo(700,400);context.lineCap=roun d;context.stroke();context.beginPath();context.moveTo(100,600);context.lineTo(700,600);context.lineCap=square;context.stroke();//baselinecontext.li neWidth=1;context.strokeStyle=#27a;context.moveTo(100,100);context.lineTo(100,700);context.moveTo(700,100);context.lineTo(700,700);context.stroke();

When round is used for animation, rounded corners can be drawn directly. The effect of lineCap can only be used at the beginning and end of the line segment, not at the connection.

lineCap=square can be used to completely close the line segment when it is closed, but it is still recommended to use clothPath() to close it.

 var canvas=document.getElementById(canvas);canvas.width=800;canvas.height=800;var context=canvas.getContext(2d);context.beginPath();context.moveTo(100, 350);context.lineTo(500,350);context.lineTo(500,200);context.lineTo(700,400);context.lineTo(500,600);context.lineTo(500,450);context.lineTo(100,450);context.lineTo(100,350 );// context.closePath(); //Recommended context.lineWidth=10;context.lineCap=square; //Not recommended context.fillStyle=yellow;context.strokeStyle=#058context.fill();context.stroke();

The five angles on a circle bisect 360°, each angle is 72°, 90°-72°=18°

The angles on the small circle bisect 72°, 18°+36°=54°

Angle to radians - radians = angle*π/180, that is (18+i*72)*Math.PI/180

 var canvas=document.getElementById(canvas);canvas.width=800;canvas.height=800;var context=canvas.getContext(2d);context.beginPath();//Angle to radian: divide by 180*PIfor( var i=0;i<5;i++){ context.lineTo(Math.cos((18+i*72)/180*Math.PI)*300+400, -Math.sin((18+i*72)/180*Math.PI)*300+400 ); context.lineTo(Math.cos((54+i*72)/180*Math.PI)*150+400, -Math.sin((54+i*72)/180*Math.PI)*150+400);}context.closePath();context.lineWidth=10;context.stroke();

Encapsulated into a function:

 window.onload=function(){ var canvas=document.getElementById(canvas); canvas.width=800; canvas.height=800; var context=canvas.getContext(2d); context.lineWidth=10; drawStar(context, 150,300,400,400)} function drawStar(ctx,r,R,x,y,){ ctx.beginPath(); //Angle to radian: divide by 180*PI for(var i=0;i<5;i++){ ctx.lineTo(Math.cos((18+i*72)/180*Math .PI)*R+x, -Math.sin((18+i*72)/180*Math.PI)*R+y); ctx.lineTo(Math.cos((54+i*72)/180*Math.PI)*r+x, -Math.sin((54+i*72)/180*Math.PI)*r+y ); } ctx.closePath(); ctx.stroke();}

Modify the small r=80, 200, and 400 respectively to get the following graphics

Add a clockwise rotation parameter: rot

 window.onload=function(){ var canvas=document.getElementById(canvas); canvas.width=800; canvas.height=800; var context=canvas.getContext(2d); context.lineWidth=10; drawStar(context, 150,300,400,400,30);} //Rot clockwise rotation angle function drawStar(ctx,r,R,x,y,rot){ ctx.beginPath(); //Angle to radians: divide by 180*PI for(var i=0;i<5;i++){ ctx.lineTo( Math.cos((18+i*72-rot)/180*Math.PI)*R+x, -Math.sin((18+i*72-rot)/180*Math.PI)*R+y); ctx.lineTo(Math.cos((54+i*72-rot)/180*Math.PI )*r+x, -Math.sin((54+i*72-rot)/180*Math.PI)*r+y); } ctx.closePath(); ctx.stroke();}

The effect of rotating 30 degrees is as follows:

1. lineJoin value

miter (default) always presents a sharp corner, bevel miter, round corner

The bevel is like the effect of a ribbon folded down.

2. Miter-related miterLimit attributes

Set the small r to 30 and lineJoin to miter. The effect is as follows: the corners are not extended into sharp corners, but are displayed in a bevel manner.

 context.lineJoin=miter;drawStar(context,30,300,400,400,30);

Why?

Because the default value of context.miterLimit=10 is 10,

miterlimit is only effective when lineJoin is miter.

miterLimit refers to the maximum value of the distance between the inner and outer corners produced when miter is used as a way to connect lines.

The default value is 10, which means the maximum value is 10px. Once it exceeds 10px, it will be displayed in bevel mode.

When the inner circle radius r is set to 30 above, the sharp angle formed is very sharp, and the distance between the inner corner and the outer corner exceeds the miterLimit of 10.

Now change the miterlimit to a larger value, to 20. The effect is as follows:

 context.lineJoin=miter; context.miterLimit=20; drawStar(context,30,300,400,400,30);

Note: miterLimit is not the distance from the white tip to the black tip. This distance is much larger than 20px.

When miterLimit is generated, the line must have a width, and the sharp corner of the middle line of the line with width is the direct distance from the outer sharp corner.

canvas gives a miterLimit experience value of 10. Only in extremely special circumstances, when very sharp corners need to be represented, miterLimit needs to be modified.

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.