如何在重新绘制画布时防止形状的痕迹-Javascript

How to prevent trail of shapes when repainting canvas - Javascript

本文关键字：布时防 -Javascript 痕迹 新绘制 绘制      更新时间：2023-09-26

我在这里开始了一个项目，遇到了一个小问题。https://jsfiddle.net/kylebrown219/gn10Lh8g/

在jsFiddle中，您可以单击并创建任意数量的圆。当你按下"繁殖"时，你会看到一个矩形在屏幕上移动。如何在不擦除轨迹后面的圆圈的情况下清除轨迹？我认为这就是问题所在：

context.clearRect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);

谢谢！

根据您的需要；如果你只是在动画之后，你可以使用这个小技巧：

在绘制矩形之前，将画布的当前内容设置为元素的背景：

canvas.style.backgroundImage = "url(" + canvas.toDataURL() + ")";

然后，在设置动画时，清除整个画布，然后在当前位置重新绘制矩形：

context.clearRect(0,0,canvas.width,canvas.height);
drawRectangle(myRectangle, context);

改良小提琴

要清除所有内容，只需重置背景样式（"无"）并清除即可。

当然，您必须限制"生成"按钮，或者将圆（作为对象）存储以便重新绘制（在这种情况下，您可以使用它来重新绘制背景）。

相关文章：