在畫布中具有褪色效果的性能問題

Question

我有this代碼導致具有褪色效果的鉛筆。我是以this爲例做的。我現在在移動網站上使用它和其他重要的東西（WebRTC）。問題是這段代碼使用了一個計時器（setInterval(loop, 1000/60);）來創建淡入淡出效果，這似乎很重。

在HTML5/Canvas中是否有另一種更輕的方式讓鉛筆具有淡入淡出效果？

Answer 1

看起來您已經完成了一個高性能的步驟，即將框架圖移動到定時循環而不是繪製移動處理程序。

現在，您可以通過使用requestAnimationFrame（RAF）而不是setInterval來讓您的循環更加高效。

RAF是首選，因爲它更友好的資源：

• RAF在資源可用和延誤當資源稀缺執行。
• 如果RAF正在瀏覽器選項卡中執行並且焦點切換到另一個選項卡，則RAF將暫停。
• 如果多個循環正在執行RAF，則RAF將對瀏覽器更改進行分組和緩衝。

如果您需要更多統一的循環時間，您甚至可以將RAF包裹在setTimeout中。

由於setTimeout是異步的，所以在它正在倒計時時不會消耗UI線程。

var fps = 30; 
function animate() { 
    setTimeout(function() { 
     requestAnimationFrame(animate); 

     // update frame info here 

     // draw the new frame here 

    }, 1000/fps); 
} 

這是爲什麼使用英國皇家空軍是從性能方面考慮，優選一個非常好的職位：

http://creativejs.com/resources/requestanimationframe/