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

Question

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

在jsFiddle中，您可以点击并创建任意数量的圆圈。当你按下＆＃39; Spawn＆＃39;你会看到一个矩形在屏幕上移动。如何在不擦除背后的圆圈的情况下摆脱痕迹？ 我认为这就是问题所在：

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

谢谢！

Answer 1

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

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

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

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

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

<强> Modified fiddle

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

您当然必须限制生成按钮，或者存储圆圈（作为对象）进行重绘（在这种情况下，您可能已经习惯了重绘背景）。