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

我有一个代码，结果是一支铅笔有淡入淡出的效果。我是根据例子做的。我现在正在一个移动网站上使用它和其他重型设备（WebRTC）。问题是，该代码使用计时器（

setInterval（loop，1000/60）；

）来创建淡入淡出效果，这似乎相当沉重

---

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

看起来您已经完成了一个性能步骤，将框架图形移动到一个定时循环，而不是在移动处理程序中绘制

现在，您可以使用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更可取：

---

取决于该循环中运行的内容。所有内容都在JSFIDLE linkNice上！为了提高性能，我在不画画的时候取消了计时器，并将帧速率从60 fps降低到了30 fps，就像你的回答一样，并将我得到的结果与你的建议进行了比较。这两种方法似乎都比我的问题要好。此外，当仅使用WebRTC访问cam时，两者都不会破坏实时感，但是，启动视频会议会让一切变得糟糕。。。我想我得买一部更好的手机。。。