Canvas使用clearRect清屏后重绘旧内容复现，canvas.width重置却正常？

这个问题我之前调试Canvas绘图时也踩过坑，核心原因是你忽略了Canvas上下文的路径状态残留，这俩方法的本质差别得掰扯清楚：

1. clearRect到底做了什么？ #

context.clearRect(0, 0, canvas.width, canvas.height)的作用很单纯：只清除画布上的像素内容，但它不会触碰Canvas上下文里保存的任何绘制状态——包括你之前画线条时留下的路径（path）、线条样式、变换矩阵等等。

如果你的绘制逻辑里没有主动重置路径，下次调用stroke()的时候，上下文会把之前所有未关闭的路径重新渲染一遍，看起来就像旧线条“又回来了”。

2. 为什么canvas.width = canvas.width能解决？ #

这个技巧其实是个“粗暴但有效”的重置手段：当你修改canvas的宽高属性时，浏览器会自动重置整个Canvas上下文——不仅清空画布像素，还会清除所有保存的路径、恢复默认的样式（比如strokeStyle变回黑色、lineWidth变回1）、重置变换矩阵等。相当于把上下文打回初始状态，自然不会再重绘旧路径。

但这种方法有副作用：如果你之前设置了自定义的线条颜色、宽度、阴影等样式，重置后都得重新设置，反而增加了代码冗余。

正确的解决方案：清屏+重置路径 #

想要用clearRect正常清屏，关键是在绘制新内容前重置路径，也就是调用context.beginPath()。这样每次绘制都是全新的路径，不会和旧路径混在一起。

举个正确的代码示例：

// 清屏：清除画布像素
context.clearRect(0, 0, canvas.width, canvas.height);
// 重置路径：告诉上下文，接下来要画新的路径了
context.beginPath();
// 开始绘制新线条
context.moveTo(10, 10);
context.lineTo(100, 100);
context.strokeStyle = '#ff0000'; // 自定义样式不会被清空
context.stroke();

总结 #

你忽略的核心点是：Canvas上下文会保留之前的绘制路径，clearRect只清像素不清路径，导致后续stroke()重绘旧路径；而重置canvas宽高会彻底重置上下文状态，顺带清空了路径。

推荐用clearRect + beginPath的组合，既高效又能保留自定义的上下文状态，比粗暴重置canvas属性更优雅。

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