-1

我有这段代码可以生成带有淡入淡出效果的铅笔。我是根据这个例子做的。我现在在移动网站上使用它和其他繁重的东西（WebRTC）。问题是这段代码使用了一个计时器setInterval(loop, 1000 / 60);（

是否有另一种（更轻的）方法可以在 HTML5/Canvas 中使用具有淡入淡出效果的铅笔？

4

1 回答 1

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

这是一篇非常好的帖子，说明了为什么从性能的角度来看使用 RAF 更可取：

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

于 2013-07-22T18:31:08.553 回答