When we use the stroke method to draw the outgoing line, we can also control the line style through some methods.

Specific setting parameters:

//Sets or returns the end style of the line
//butt: default. Add a straight edge to each end of the line.
//round: adds a round cap to each end of the line.
//square: adds a square cap to each end of the line.
context.lineCap="butt|round|square";

//Sets or returns the corner type created when two lines intersect
//bevel: creates a bevel.
//round: creates a fillet.
//miter: default. Create sharp corners.
context.lineJoin="bevel|round|miter";

//Sets or returns the current line width
//Number: the width of the current line in pixels.
context.lineWidth=number;

//Set or return the maximum miter length
//number: positive. Specifies the maximum miter length. If the miter length exceeds the value of miterlimit, the corners are displayed as "bevel" type of linejoin.
context.miterLimit=number;

Set line width

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,50);
ctx.lineTo(180,50);
ctx.lineWidth = 5;
ctx.stroke();

ctx.lineWidth = 3;
ctx.strokeRect(20,100,160,50);

Set end cap

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.lineWidth = 10;

ctx.beginPath();
ctx.lineCap="butt";
ctx.moveTo(20,60);
ctx.lineTo(180,60);
ctx.stroke();

ctx.beginPath();
ctx.lineCap="round";
ctx.moveTo(20,90);
ctx.lineTo(180,90);
ctx.stroke();

ctx.beginPath();
ctx.lineCap="square";
ctx.moveTo(20,120);
ctx.lineTo(180,120);
ctx.stroke();

Set the inflection point where two lines intersect

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.lineWidth = 20;

ctx.beginPath();
ctx.lineJoin="bevel";
ctx.moveTo(20,90);
ctx.lineTo(100,20);
ctx.lineTo(180,90);
ctx.stroke();

ctx.beginPath();
ctx.lineJoin="round";
ctx.moveTo(20,140);
ctx.lineTo(100,70);
ctx.lineTo(180,140);
ctx.stroke();

ctx.beginPath();
ctx.lineJoin="miter";
ctx.moveTo(20,190);
ctx.lineTo(100,120);
ctx.lineTo(180,190);
ctx.stroke();

Set the miter length of the inflexion where two lines intersect

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.lineWidth = 10;

ctx.beginPath();
ctx.lineJoin="miter";
ctx.miterLimit=10;
ctx.moveTo(80,20);
ctx.lineTo(110,27);
ctx.lineTo(80,34);
ctx.stroke();

ctx.beginPath();
ctx.lineJoin="miter";
ctx.miterLimit=1;
ctx.moveTo(80,50);
ctx.lineTo(110,57);
ctx.lineTo(80,64);
ctx.stroke();

To avoid the miter length being too long, we can use the 'miterlimit' attribute. But when the 'linejoin' attribute is "miter", the setting of 'miterlimit' will take effect. The smaller the angle of the corner, the greater the miter length. If the miter length exceeds the value of 'miterlimit', the corners will be displayed as' bevel 'type of' linejoin '.

Set dashed line

Canvas provides a way to implement dashed lines:

//Draw a dotted line
//Arr: array set, which can have multiple parameters
context.setLineDash(arr)

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(20,50);
ctx.lineTo(180, 50);
ctx.setLineDash([10]);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(20,70);
ctx.lineTo(180, 70);
ctx.setLineDash([10,5]);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(20,90);
ctx.lineTo(180, 90);
ctx.setLineDash([10,5,15]);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(20,110);
ctx.lineTo(180, 110);
ctx.setLineDash([20,15,10,5]);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(20,130);
ctx.lineTo(180, 130);
ctx.setLineDash([20,15,10,5,0]);
ctx.stroke();

It can be seen from the above figure that no matter how many parameters are included in the array, the line segments will be displayed repeatedly and circularly according to the order of parameters and the virtual reality.