有HTML5 canvas動畫口吃的解決方案嗎？

我正在研究HTML5畫布動畫（更準確地說是照片幻燈片）。到目前爲止，我所有的幻燈片都是閃光燈，因爲上次（2010年3月）我看到了閃光燈的幀速率比HTML5畫布高出3倍-4倍。今天據說目前的瀏覽器都支持Flash，但我目前在Firefox和Chrome瀏覽器中發現的所有html5 canvas樣本都很糟糕。有HTML5 canvas動畫口吃的解決方案嗎？

在示例setInterval設置爲15ms，這應該給予至少60 fps。但在我的筆記本電腦上動畫口吃很多： http://demo.webdevhub.net/canvas/simple/

是否有解決方法，至少對最新的瀏覽器或我必須等待另一年？

最好的問候，馬克

來源

2011-06-28 mark

這似乎是罰款FF5在Windows 7似乎也是順利的IE9。

我認爲問題的一部分可能是您的間隔太小。在速度較慢的設備上，它可以達到每秒66幀，但後來下降到很少，然後回到66幀/秒，產生一個口吃效果。

通過給出一個非常快的間隔，你有效地告訴它跑得儘可能快，它顯然需要屏住呼吸。也許不是，也許還有其他工作。

嘗試使用50ms的間隔，看看會發生什麼。

對於踢腿，而不是使用setInterval，看看是否使用requestAnimFrame可以幫助你解決問題。儘管如此，它可能與快速間隔有相同的問題。

// shim for requestAnimFrame with setTimeout fallback 
    window.requestAnimFrame = (function(){ 
     return window.requestAnimationFrame  || 
       window.webkitRequestAnimationFrame || 
       window.mozRequestAnimationFrame || 
       window.oRequestAnimationFrame  || 
       window.msRequestAnimationFrame  || 
       function(/* function */ callback, /* DOMElement */ element){ 
       window.setTimeout(callback, 1000/60); 
       }; 
    })(); 


    // usage: 
    // instead of setInterval(render, 16) .... 

    (function animloop(){ 
     render(); 
     requestAnimFrame(animloop, element); 
    })();

來源

2011-06-28 23:04:17

我目前工作的一個HTML5炸彈克隆並在第一次我試圖讓JavaScript的gameLoops（谷歌）的一些最好的實現，但最終我用一個簡單的setTimeout（截至... ）gameLoop :)。

而且看起來它的工作非常好，很順利。我還有很多工作要做，但你可以看到當前的開發版本（setTimeout設置爲30 FPS - 但是如果我將它設置爲60 FPS - 完全沒有問題）：

（謝謝Simon爲您的繪圖優化評論始終在這裏評論StackOverflow）

http://sabiland.net/Testing/BomberMan_Dev/BomberMan.aspx

來源

2011-06-29 05:36:49 sabiland

有HTML5 canvas動畫口吃的解決方案嗎？

回答

相關問題