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

【问题标题】：HTML5 Remove previous drawn object in canvasHTML5 删除画布中先前绘制的对象
【发布时间】：2013-06-06 18:44:26
【问题描述】：

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

【问题讨论】：

你能贴一些代码吗？
密切相关：How do I get reference of old generated elements in HTML Canvas?
我做了一个小提琴来回答这个 SO 问题：stackoverflow.com/q/16728162/2252829。在小提琴中，我有两个画布，一个用于静态对象，另一个用于动态对象。可能有用。 jsFiddle link

标签： javascript html html5-canvas

【解决方案1】：

您必须在每个画框开始时清除画布

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

【讨论】：

这也会清除我的其他背景数据。我只需要删除我重复绘制的汽车对象
是的，您必须重新绘制背景以及处于新位置的汽车。或者，如果您的背景没有移动，您可以直接在画布下方分层图像。这样您就不必每次都重新绘制背景——只需重新绘制移动的汽车即可。

【解决方案2】：

画布只是像素数组，它们对您绘制的形状一无所知。

过去在位图显示器上使用了一些动画技巧（例如“异或绘图”），可用于在绘制新形状之前移除旧形状，但在现代机器上通常要简单得多（而且速度非常快) 只是擦除画布并为每一帧重新开始。

考虑到您的 cmets 的其他答案，我建议只使用两个画布 - 一个用于静态背景，一个用于汽车。如果背景图片是静态的，它甚至可以是 <img> 元素而不是 Canvas。

如果汽车图像是静态的，您也可以只绘制一次，然后使用 CSS 定位设置其相对于每一帧背景的位置。

【讨论】：

@OP 您还可以在单独的画布元素上绘制背景和叠加层，并在动画循环结束时将它们合并起来。
@rlemon 甚至不需要合并它们 - 通过 CSS 定位，您可以将一个放在另一个之上
@rlemon，您能否添加一个基于 CSS 的分层的最小示例作为单独的答案？
@Leo 只需将fixed 或absolute 的两个画布定位为相同的left 和top 值。 AFAICR，出现在 DOM 中的第二个将是“最顶层”
这是正确的 ^ 或者您可以使用 z-indexs，但这更麻烦。

【解决方案3】：

假设您的形状是car，那么您首先必须分配一个新图形，例如：

car.graphics = new createjs.Graphics();

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

【讨论】：