当我们使用 stroke 方法绘制出线条前，也可以通过一些方法来控制线条的样式。

具体设置参数：

// 设置或返回线条的结束端点样式
// butt:默认。向线条的每个末端添加平直的边缘。
// round:向线条的每个末端添加圆形线帽。
// square:向线条的每个末端添加正方形线帽。
context.lineCap="butt|round|square";

// 设置或返回两条线相交时，所创建的拐角类型
// bevel:创建斜角。
// round:创建圆角。
// miter:默认。创建尖角。
context.lineJoin="bevel|round|miter";

// 设置或返回当前的线条宽度
// number:当前线条的宽度，以像素计。
context.lineWidth=number;

// 设置或返回最大斜接长度
// number:正数。规定最大斜接长度。如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 "bevel" 类型来显示。
context.miterLimit=number;

设置线条宽度

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

设置结束线帽

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

设置两线相交的拐点

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

设置两线相交的拐点斜接长度

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

为了避免斜接长度过长，我们可以使用 miterLimit 属性。但当 lineJoin 属性为 "miter" 时，设置 miterLimit 才会生效!边角的角度越小，斜接长度就会越大。如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 "bevel" 类型来显示。

设置虚线

Canvas 提供了方法可用来实现虚线：

// 画一条虚线
// arr:数组集合，里面的参数可以有多个
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();

由上图可见，不管数组中包含几个参数，都会按照参数的顺序和虚实不断地循环和重复显示线段。