重绘时如何防止形状拖尾 canvas - Javascript

Question

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

在 jsFiddle 中，您可以单击并创建任意数量的圈子。当您按 'Spawn' 时，您会看到一个矩形在屏幕上移动。我如何摆脱痕迹，而不擦除它后面的圆圈？我认为这就是问题所在：

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

谢谢！

Answer 1

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

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

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

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

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

Modified fiddle

要清除所有内容，只需重置背景样式 ("none") 并清除。

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

重绘时如何防止形状拖尾 canvas - Javascript

How to prevent trail of shapes when repainting canvas - Javascript

javascript

jquery

canvas

jsfiddle