HTML5 在画布中删除先前绘制的对象

Question

我有一个多边形对象（比如一辆车），用moveTo和lineTo方法在HTML5画布中绘制。我想在画布上不同的位置反复绘制该对象（模拟移动物体）。我的问题是之前绘制的对象没有被清除，而是在画布上绘制了多个图像。我该如何解决这个问题？

- Anish

---

你能贴一些代码吗？ - Tom

紧密相关：如何在HTML Canvas中获取旧生成元素的引用？ - apsillers

我创建了一个fiddle来回答这个SO问题：http://stackoverflow.com/q/16728162/2252829。在fiddle中，我有两个画布，一个用于静态对象，另一个用于动态对象。可能会有用。[jsFiddle链接]（http://jsfiddle.net/gfcarv/N22Na/） - Gustavo Carvalho

Answer 1

你需要在每个绘制帧的开始时清空画布

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

- Tom

---

这将清除我的其他背景数据。我只需要删除重复绘制的汽车对象。 - Anish

是的，你需要重新绘制背景以及汽车在新位置的图像。或者，如果你的背景不动，你可以直接将一张图片叠加在画布下面。这样，你就不必每次重新绘制背景，只需重新绘制移动的汽车即可。 - markE

Answer 2

< p > 画布只是像素的数组，对您绘制的形状一无所知。 < /p> < p > 曾经在位图显示器上使用过的动画技巧（例如“异或绘图”）可以用于在绘制新形状之前删除旧形状，但在现代计算机上，每帧只需清除画布并重新开始即可更加简单（而且完全快速）。< /p> < p > 根据您对其他答案的评论，我建议只使用两个画布 - 一个用于静态背景，另一个用于汽车。 如果背景图像是静态的，则甚至可以是一个<img>元素，而不是画布。< /p> < p > 如果汽车图像是静态的，则可以仅绘制一次，然后使用CSS定位为每个帧设置其相对于背景的位置。< /p>

- Alnitak

---

你可以在不同的画布元素上绘制背景和叠加层，然后在动画循环结束时将它们合并。 - rlemon

没必要把它们合并，使用CSS定位即可将它们一个放在另一个上面。 - Alnitak

@rlemon，您能否请添加一个基于CSS的分层的最小示例作为单独的答案？ - Leo

@Leo 只需将两个画布都设置为具有相同的“left”和“top”值的“fixed”或“absolute”定位即可。据我所知，在DOM中第二个出现的画布将是“最上层”的。 - Alnitak

这是正确的做法^，或者你可以尝试调整z-index，但那会更混乱。 - rlemon

Answer 3

假设你的形状是car，那么你首先要指定一个新图形，例如：

car.graphics = new createjs.Graphics();

car.graphics
            .setStrokeStyle(1)
            .beginStroke("#000000")
            .moveTo()
            .lineTo()
            .lineTo()

- Ankush singh