html5画布动画。移动图像闪烁或线索

我已经看到关于此的其他帖子，但我找不到任何东西来帮助我。html5画布动画。移动图像闪烁或线索

我在画布上画一幅图片，当它移动时，它会留下一条尚未清除的痕迹。如果我在另一幅图上绘制这幅图像，我不会得到任何踪迹，但顶部闪烁的图像。我不认为clearRect会为我工作。

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

我不太清楚如何进行，任何意见将是巨大的

*添加例子 - jsfiddle.net/zE67k/2用图像和闪烁。没有图像和线索的jsfiddle.net/zE67k/3。这只是一个例子，我试图通过背景图像来实现这一点。

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

来源

2012-05-01 mao

为什么不会'clearRect'工作为你？你需要清除这个区域然后重绘，这就是为什么你需要找到路径。 – Loktar

theres一个背景图像，我应该把它拿出来的画布，并将其放入css – mao

有传言说，清除画布的最快方法就是'canvas.width = canvas.width;' –

在绘制其他图像ontop之前，应该保存干净的画布，并在再次绘制移动的图像之前恢复保存的干净状态。您可以使用一个额外的画布，以节省一个干净的状态：

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

然后whenver你想画/移动你的其他图像/件简单的恢复干净的状态：

canvas.getContext('2d').drawImage(buffer); 
drawObject(canvas, x, y, w, h);

来源

2012-05-03 14:37:11

谢谢，这让我走上了正轨。感谢帮助。 – mao

html5画布动画。移动图像闪烁或线索

回答

相关问题