Javascript 帆布填充风格表演

我在检查我的游戏在轨迹效果下的表现有多差。但我注意到我每秒做的手术更多。这怎么可能

这是怎么

    context.fillRect(0, 0, 500, 500); // clearing canvas without any trail effect

。。。比这个慢

    context.fillStyle = 'rgba(255, 255, 255, 0.1)'; // clearing canvas with trail effect
    context.fillRect(0, 0, 500, 500);

---

指向测试的链接：

我想这里有一点初始化问题：画布填充样式在每个测试循环之间没有重置

在调用fillRect之前设置fillstyle，您将看到黑色的fillRect比预期的更快

还请记住，clearRect将更快地清除画布

我更新了您的性能测试：

编辑：我很想知道几个调用的开销，所以我编辑了性能测试 查看3/10/20步骤中所用的时间

因此，在FF（mac OS/imac）上，我们有：

3个步骤：1/12000=83 ns=3*开销+填充时间 10步：1/8000=125纳秒=10*开销+填充时间 20步：1/5000=200纳秒=20*开销+填充时间

我们的开销接近6ns，填充时间接近60ns

因此，公式大致为所用时间=步骤数*6+（填充比率）*60
这使得90纳秒的50%填充在十个步骤

这种计算应该在多个浏览器/设备上进行，以便更加相关

---

此外，在英国皇家空军内进行这项测试也会有好处。

谢谢！这就解释了：）只清理画布的一部分怎么样。示例：一个移动的矩形-将此效果添加到其中会比添加整个画布更好吗？还是一样？不客气。很难有一个明确的答案：只使用一个较小的rect，当然会更快，但是对于许多绘制操作，根据画布实现开销，它可能会更慢（特别是对于速度较慢的设备）。还可以考虑在requestAnimationFrame回调中调用这种操作，因为有些实现只同步绘制（这是非常合乎逻辑的）。