如何消除Canvas绘制折线时出现的意外线条端点？

你遇到的问题是因为当前路径是开放路径，加上较粗的线宽后，开放的起点和终点会显示出线条端点的延伸。可以通过以下两种方式解决：

方法1：闭合路径（推荐） #

在绘制完所有线段后添加closePath()，让路径形成闭合的三角形，这样stroke时线条会自然连接起点和终点，消除突出的端点：

context.beginPath();
context.moveTo(20, 20);
context.lineTo(120, 70);
context.lineTo(220, 20);
context.closePath(); // 闭合路径
context.lineWidth = 15;
context.stroke();
context.fillStyle = 'aqua';
context.fill();

方法2：调整线帽样式 #

如果不需要闭合路径，可以设置lineCap为'round'或'square'，让端点与路径末端对齐（但这种方式仅适用于开放路径的端点处理，对于三角形这类闭合图形，闭合路径更合理）：

context.beginPath();
context.moveTo(20, 20);
context.lineTo(120, 70);
context.lineTo(220, 20);
context.lineWidth = 15;
context.lineCap = 'round'; // 或者 'square'
context.stroke();
context.fillStyle = 'aqua';
context.fill();

另外需要注意：当填充和描边同时进行时，闭合路径能保证填充区域与描边完全贴合，更符合你目标图形的效果。

内容的提问来源于stack exchange，提问作者Gonzo Bard