Canvas--线条的属性
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<lineCap.length;i++){ 11 context.strokeStyle = `rgb(${100 + i * 30},${100 + i * 60},${100 + i * 90})` 12 context.lineWidth = 15; 13 context.lineCap = lineCap[i]; 14 context.beginPath(); 15 context.moveTo(75+i*50,50); 16 context.lineTo(75+i*50,200); 17 context.stroke(); 18 }
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 }
