canvas自定义线条笔帽

Canvas中可以通过设置lineCap属性来自定义线条的笔帽。lineCap有三个可选值：butt、round和square。

- butt：默认值，线条的末端是平直的，不会超过线条的终点。
- round：线条的末端是圆形的，会超过线条的终点一半的宽度。
- square：线条的末端是方形的，会超过线条的终点一半的宽度。

示例代码：

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

// 绘制线条
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(250, 50);
ctx.stroke();

// 设置线条笔帽
ctx.lineCap = 'round';
ctx.beginPath();
ctx.moveTo(50, 100);
ctx.lineTo(250, 100);
ctx.stroke();

ctx.lineCap = 'square';
ctx.beginPath();
ctx.moveTo(50, 150);
ctx.lineTo(250, 150);
ctx.stroke();

效果如下图所示：