html canvas lineCap属性设置绘制线段的末端样式

HTML canvas lineCap属性可以设置绘制线段的末端样式，它的取值有三种：butt、round、square。

butt

butt是默认值，它表示末端以线段的终点处直接结束，不会有任何额外的延长，如下图所示：

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

运行上述代码，会得到如下图所示的结果：

round

round表示末端连接处会以圆形结束，半径为线段宽度的一半，如下图所示：

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

运行上述代码，会得到如下图所示的结果：

square

square表示末端连接处会以正方形结束，宽度和高度均为线段宽度的一半，如下图所示：

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

运行上述代码，会得到如下图所示的结果：