javascript - Canvas fillStyle 表现

Question

我正在检查我的游戏在拖尾效果下的性能会降低多少。但我注意到每秒的操作次数更多了。这怎么可能？

这是怎么回事...

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

测试链接: http://jsperf.com/canvas-trailing-effect

Answer 1

我想这里存在一些初始化问题: Canvas 填充样式在每个测试循环之间不会重置。

在调用 fillRect 之前设置 fillstyle，您会发现黑色的 fillRect 速度更快，正如预期的那样。

还要记住，clearRect 会更快地清除 Canvas 。

我更新了您的性能测试:

http://jsperf.com/canvas-trailing-effect/2

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

所以我们在 FF (mac OS/imac) 上有:

3 步:1/12000 = 83 ns = 3 * 开销 + 填充时间 10 步:1/8000 = 125 ns = 10 * 开销 + 填充时间 20 步:1/5000 = 200 ns = 20 * 开销 + 填充时间

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

因此，公式大约为所用时间 = 步数 * 6 +(填充比例)* 60
这使得十步中 50% 的填充需要 90 ns。

这种计算应该在多个浏览器/设备上完成才能更相关。

此外，在 rAF 内完成此测试将受益匪浅。