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

【问题标题】：html5 canvas animation. moving an images gives flickering or a trailhtml5画布动画。移动图像会产生闪烁或痕迹
【发布时间】：2012-05-11 02:08:23
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

为什么clearRect 不适合你？您需要清除该区域然后重新绘制，这就是您获得踪迹的原因。
有一个背景图片，我应该把它从画布中拿出来放在css中
有传言说清除画布最快的方法就是canvas.width = canvas.width;
@AlexanderPavlov 那是一个可怕的谣言。 simonsarris.com/blog/346-how-you-clear-your-canvas-matters
@Loktar：很高兴听到。我们对与上述清除画布的方式相关的 Chrome DevTools 的性能报告很差。很高兴听到它现在不会经常出现了:)

标签： html canvas

【解决方案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);

【讨论】：