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

这是一篇非常好的文章，说明为什么从绩效的角度来看，使用RAF更为可取：

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

画布中的淡化效果的性能问题

1 个答案: