在画布中具有褪色效果的性能问题

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/