清除后绘制图像时出现画布“形状伪影”

Question

我的 Web 应用程序中有一个非常令人费解的画布工件/错误。 清除画布后，在画布上绘制另一个图像时，之前已清除的圆形会重新出现，但只会出现一次。图像已像这样初始化一次：

this.image = new Image();
this.image.src = imageroot + image + '.png';

在调试器中，我在每次绘制图像时都会中断，以发现此形状伪影仅在我第一次绘制此图像时出现。

context.drawImage(this.image, x - width / 2, z - height / 2, width, height);

虽然它不能在图像中，但随后对同一图像的绘制只是表明这个圆圈确实不在我绘制到画布上的图像中。但我很肯定它在调用此函数期间出现。所以它是从某个地方突然冒出来的。

我想我在某处做错了什么，因为这是一种非常奇怪的行为，但我找不到它并且无法发布数百行代码，所以我想知道什么样的滥用/不当行为可能会导致这样一个工件出现在这样一个意想不到的上下文中（调用drawImage），所以我至少有一条线索可以捕捉到这个错误。

Answer 1

记得使用beginPath()清除之前的所有路径。

当您清除画布时，只需调用此方法，之前的路径将不会在您下次描边或填充时重新渲染。