HTML5 画布动画.移动图像会产生闪烁或轨迹

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