1、lineCap：属性 lineCap 的值决定了线段端点显示的样子。它的值可以是：butt， round 或 square。默认是 butt。

　　buut----默认样式。

　　round----端点处加上半径为一半线宽的半圆。

　　square----端点处加上等宽且高度为一半线宽的方块。

1 const lineCap = ['butt','round','square']; 2  3 context.beginPath() 4 context.moveTo(50,50) 5 context.lineTo(200,50) 6 context.moveTo(50,200) 7 context.lineTo(200,200) 8 context.stroke() 9 10 for (let i=0;i

 

2、lineJoin：属性 lineJoin 决定了图形中两线段连接处所显示的样子。它的值可以是：round,bevel 或 miter。默认是 miter。

　　round----创建圆角。

　　miter----默认。创建尖角。

　　bevel----创建斜角。

　　注意：当值是 miter的时候，线段会在连接处外侧延伸直至交于一点，延伸效果受到 miterLimit 属性的制约。

1 const lineJoin = ['round', 'bevel', 'miter']; 2  3 context.lineWidth = 15; 4 for (let i = 0; i < lineJoin.length; i++) { 5     context.lineJoin = lineJoin[i]; 6     context.strokeStyle = `rgb(${100 + i * 30},${100 + i * 60},${100 + i * 90})` 7     context.beginPath(); 8     context.moveTo(15, 15 + i * 40); 9     context.lineTo(55, 55 + i * 40);10     context.lineTo(95, 15 + i * 40);11     context.lineTo(135, 55 + i * 40);12     context.lineTo(175, 15 + i * 40);13     context.stroke();14 }

3、miterLimit：miterLimit 属性设置或返回最大斜接长度。默认为10

　　斜接长度指的是在两条线交汇处内角和外角之间的距离。

　　

　　注：只有当 lineJoin 属性为 "miter" 时，miterLimit 才有效。

　　边角的角度越小，斜接长度就会越大。而miterLimit 属性就是为了限制斜接长度过长。

　　如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 "bevel" 类型来显示。

1 context.lineWidth = 15 2 context.miterLimit = 2 3  4 for (let i = 0; i < 3; i++) { 5     context.beginPath() 6     context.strokeStyle = `rgb(${100 + i * 30},${100 + i * 60},${100 + i * 90})` 7     context.moveTo(50 + 100 * i, 75 - 25 * i) 8     context.lineTo(150 + 100 * i, 100) 9     context.lineTo(50 + 100 * i, 125 + 25 * i)10     context.stroke()11 }