HTML Canvas：restore后执行额外stroke的异常问题解析

核心误区：save/restore根本碰不到路径 #

Canvas的save()和restore()只负责管理绘图状态栈——里面存的是虚线样式、描边颜色、变换矩阵这类样式属性，完全不涉及当前正在绘制的路径。路径是Canvas上下文里独立的“草稿板”，只要你不主动调用beginPath()清空它，所有画过的图形都会一直留在草稿上，save/restore对它没有任何影响。

你的代码执行逻辑拆解 #

我还原下你代码的实际运行流程，就能明白问题出在哪：

1. 绘制外圆：你调用beginPath()+arc()+stroke()画了实线外圆，但stroke()只是把草稿上的外圆“印”到画布上，并不会清空草稿——外圆的路径还留在草稿里。
2. 保存状态+画虚线线段：你没调用beginPath()清空草稿，直接加了一条(75,75)到(90,90)的线段，现在草稿里是「外圆 + 这条线段」两条路径。接着用虚线样式stroke()，相当于把这两条路径都用虚线画了一遍（外圆被虚线覆盖，所以你看到的是外圆和虚线线段）。
3. restore()恢复样式：这时候只是把绘图样式变回了实线，但草稿里的「外圆 + 线段」路径依然存在。
4. 取消最后一行stroke()注释：相当于用实线样式再把草稿里的路径画一遍，线段部分就会在原来的虚线上叠加一条实线，看起来就是虚线上多了一条实线。

解决办法 #

如果不想后续的stroke影响之前的路径，每次开始新图形前必须调用beginPath()清空草稿。比如在设置虚线样式之前加一行ctx.beginPath()，这样线段的路径就不会和外圆的路径混在一起，后续再stroke也只会画新的路径。

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