清除后绘制图像时出现画布“形状伪影" [英] 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)，所以我至少有一条线索可以捕捉到这个错误.

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屋！