13

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

4

3 回答 3

14

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

context.clearRect(0, 0, canvas.width, canvas.height);
于 2013-06-06T18:47:20.580 回答
12

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

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

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

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

于 2013-06-06T18:49:32.463 回答
0

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

car.graphics = new createjs.Graphics();

car.graphics
            .setStrokeStyle(1)
            .beginStroke("#000000")
            .moveTo()
            .lineTo()
            .lineTo()
于 2021-02-08T07:50:50.140 回答