1

我看过其他关于此的帖子，但我找不到任何可以帮助我的东西。

我正在画布上绘制一个移动的图像，当它移动时，它会留下一条尚未被清除的自身痕迹。如果我将此图像绘制在另一个图像之上，我不会得到任何痕迹，但顶部的图像会闪烁。我不认为 clearRect 对我有用。

我可以在图像动画之间保存画布状态吗？还是我应该使用第二张画布？

我不太确定如何进行，任何建议都会很棒

*添加示例 - jsfiddle.net/zE67k/2 带有图像和闪烁。jsfiddle.net/zE67k/3 没有图像和踪迹。这只是一个例子，我也试图通过画布的背景图像来实现这一点。

*我还尝试将一个画布放在另一个画布上，但我仍然会闪烁，我认为问题在于我放置 clearRect 的位置。如果我将 clearRect 放在眼睛被绘制之前，它确实有效，但是这段代码绘制和更新眼睛的方式一次只做一个，因此前一个眼睛被清除，只剩下一个。我正在尝试从本教程http://astronautz.com/wordpress/html5-eyes-that-follow-the-mouse/

4

1 回答 1

2

您应该在将其他图像绘制到顶部之前保存干净的画布，并在再次绘制移动的图像之前恢复保存的干净状态。您可以使用额外的画布来保存干净的状态：

// create clean buffer
var buffer = document.createElement('canvas'), 
   canvas = document.getElementById('myCanvas');

buffer.width = canvas.width;
buffer.height = canvas.height;

// draw "background"/clean state to canvas
drawBackground(canvas);

// save clean state
buffer.getContext('2d').drawImage(canvas);

然后，当您想绘制/移动其他图像/项目时，只需恢复干净状态：

canvas.getContext('2d').drawImage(buffer);
drawObject(canvas, x, y, w, h);
于 2012-05-03T14:37:11.633 回答