Question

我已经看过其他有关此事的帖子，但我找不到任何可以帮助我的事情。

我在画布上画一幅移动的图像，当它移动时，它留下了一条尚未被清除的痕迹。如果我在另一个上面绘制这个图像，我就不会有任何痕迹，但顶部的图像会闪烁。我不认为clearRect会对我有用。

我可以在图片动画之间保存画布状态吗？或者我应该使用第二个画布？

我不太确定如何继续，任何建议都会很棒

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

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

Answer 1

在绘制其他图像之前，应该先保存干净的画布，然后在再次绘制移动的图像之前恢复保存的干净状态。您可以使用其他画布来保存干净状态：

// 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);

html5画布动画。移动图像会产生闪烁或痕迹

1 个答案: