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

Question

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

Answer 1

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

以前在位图显示上使用的动画技巧（例如“xor drawing”）可用于在绘制新形状之前删除旧形状，但在现代机器上它通常更简单（并且非常快） ）只是擦除画布并为每一帧重新开始。

鉴于您对其他答案的评论，我建议您使用两个画布 - 一个用于静态背景，另一个用于汽车。如果背景图像是静态的，它甚至可以是<img>元素而不是Canvas。

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

Answer 2

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

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

Answer 3

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

car.graphics = new createjs.Graphics();

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