在清除后绘制图像时出现“画布形状伪像” [英] Canvas 'shape artifact' appearing when drawing an image after clear

问题描述

我在我的web应用程序中有一个真正令人费解的画布工件/错误。
清除画布后，先前已清除的圆形形状在将另一个图像绘制到画布时重新出现，但只有一次。图片已初始化一次：

I'm having a really puzzling canvas artifact / bug in my web application. After clearing the canvas, a circle shape that has been previously cleared reappears when drawing another image to the canvas, but only once. The image has been initialized once like so :

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

在调试器中，我断开每个图像绘制发现这个形状工件只出现第一次

In the debugger I break on each image draw to discover that this shape artifact only appears the first time I draw this image.

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

它不能在图像中，然后相同的图像的后续绘制只是显示这个圆确实不是在我画到画布的图像。但我是积极的，它出现在调用这个函数。

It cannot be in the image though, and the subsequent draws of the same image just show that this circle is indeed not in the image that I draw to the canvas. But I am positive that it appears during the call to this function. So it is somehow popping up from somewhere.

我想我在某个地方做错了，因为它是一个非常奇怪的行为，但我找不到它，不能发布数百行代码，所以我想知道什么样的滥用/错误可能会导致这样的工件出现在这样的意外上下文（调用drawImage），所以我至少有一个跟踪，抓住这个bug 。

I guess I'm doing something wrong somewhere because it is a very strange behavior, but I couldn't locate it and cannot posts hundreds of lines of code, so I would like to know what kind of misuse / wrongdoing could cause such an artifact to appear in such an unexpected context (calling drawImage), so that I have at least a trail to follow to catch this bug.

推荐答案

请记住使用 beginPath（）清除所有先前的路径

Remember to use beginPath() to clear all previous paths.

清除画布时，只需调用此方法，并且下一次敲击或填充时，先前的路径不会被重新渲染。

When you clear the canvas simply call this method and the previous paths won't be re-rendered next time you stroke or fill.

这篇关于在清除后绘制图像时出现“画布形状伪像”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！