如何使用同一个CanvasRenderingContext2D绘制实线和虚线两种线条

• CanvasRenderingContext2D 的样式属性为全局生效状态，虚线规则、线宽、描边色等配置一旦设置，会持续生效直到被主动修改
• 你将两条线条的路径定义放在了同一次beginPath()和stroke()执行周期内，所有子路径都会沿用首次设置的[2, 2]虚线规则，因此两条线都显示为虚线

仅需拆分不同样式线条的绘制流程，每条线条单独配置样式、单独描边即可，可搭配save()/restore()方法快速恢复上下文状态，避免后续绘制被样式配置污染，具体实现代码如下：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

// 绘制虚线
ctx.save(); // 保存当前上下文原始状态
ctx.setLineDash([2, 2]);
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 50);
ctx.stroke();
ctx.restore(); // 恢复状态，自动清除虚线配置

// 绘制实线
ctx.beginPath();
ctx.moveTo(50, 90);
ctx.lineTo(280, 120);
ctx.stroke(); // 此时使用默认实线规则，无需额外配置

如果不想使用save()/restore()，也可以通过显式将虚线规则设置为空数组的方式切换回实线：

// 绘制实线时主动修改虚线规则
ctx.setLineDash([]);
ctx.beginPath();
ctx.moveTo(50, 90);
ctx.lineTo(280, 120);
ctx.stroke();

注意：每次调用beginPath()都会开启独立的新路径，和之前定义的路径完全隔离，不同样式的路径必须分开调用stroke()才能应用对应的样式配置。

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