HTML5 Canvas重影動畫問題？

我一直在尋找大量關於如何使用javascript和請求動畫框架來完成正確的HTML5動畫的教程，甚至在演示中，它看起來像動畫看起來像是被重繪的圖像的blury留下了一個幻燈片的幻影圖像第二。但後來我看到像微軟這樣的遊戲移植了切割繩索的版本，似乎已經解決了這個問題。有沒有人知道一種方法來使這種畫布效果不那麼明顯？HTML5 Canvas重影動畫問題？

來源

2012-11-06 Russell Asher

你能更具體嗎？舉例說明？ – Shmiddty

我猜你的問題是新圖像正在重繪之前的前一個圖像被清除。我建議確保畫布清除，或者至少在圖像被重新繪製的區域。雖然，我嘗試清除整個畫布與清除畫布的特定部分，並達到一定的尺寸（大約800x600），但清除整個畫布更快。

我用帆布我的遊戲（在建）：http://www.dacheng.me/dBoom

隨意瀏覽的JS源代碼！

來源

2012-11-06 19:58:08 Dacheng

你怎樣清理整個畫布？ –

context.clearRect（0，0，canvas.width，canvas.height）; – Dacheng

我也在我的代碼中完成了這項工作。我要檢查是否它的Windows上運行我的Mac Pro導致此刷新率問題。 –

我想你要找的是什麼窗口緩衝：

http://en.wikipedia.org/wiki/Multiple_buffering

基本上想法是使用那些讓你切換被繪製完成後，交換兩個不同的窗口/畫布元素完全畫出「框架」之間。這項技術被用於OpenGL以及今天存在的幾乎任何其他合法圖形程序。

來源

2012-11-06 17:31:20 TMan

我看到很多人在這個想法中混合了requestanimation框架。我想知道IE瀏覽器如何實現這一目標，因爲webgl不在IE中 –

我並不是暗示使用webgl，只是將窗口緩衝的概念從你所說的，可能已經用'requestanimation'框架完成了 - 雖然我是不確定。 – TMan

我只是想知道我可以採取什麼措施擺脫這一點，或者如果它的畫布具體問題。 –

HTML5 Canvas重影動畫問題？

回答

相關問題