我知道 HTML5 gamedev 中最昂贵的操作之一就是在画布上绘图。但是，在它之外绘制图像呢？那有多贵？当画布为 100 x 100 像素并且我尝试在 (1000, 1000) 处绘制图像时，究竟会发生什么？检查精灵坐标以确保它在画布内会提高渲染效率吗？
问问题
2755 次
2 回答
8
在这些测试中，我使用了 Google Chrome 版本 21.0.1180.57。
我做了一个小小提琴来测试这种情况......你可以在这里查看：http: //jsfiddle.net/Yannbane/Tnahv/。
我已经运行了 1000000 次测试，这是我得到的数据：
在画布内渲染图像持续了 2399 毫秒。
在画布外渲染图像持续了 888 毫秒。
这意味着在画布外绘制确实需要一些时间，大约是在画布内部渲染所需时间的 37%。
结论：最好在渲染之前检查图像是否在画布内。
但是，当然，我想知道好多少……所以，我又做了一次测试。这一次，我当然实现了边界检查，并且只用了 3 毫秒就可以在画布外“渲染”图像 1000000 次。这比简单地在外面渲染要好 29600%。
You can see those tests here: http://jsfiddle.net/Yannbane/PVZnz/3/.
于 2012-08-07T16:05:13.883 回答
3
如果图形不在屏幕上，您需要自己执行此检查并跳过绘图。
话虽如此，某些浏览器确实在某些情况下对此进行了优化。不久前，我在写一篇关于 IE9 性能分析器的文章时发现，如果图像超出范围，IE9 将优化绘制图像。转换矩阵可能必须是恒等式才能使此优化起作用，并且无论哪种方式，您都不应该依赖浏览器来执行此操作。
始终检查。
编辑：您可以运行这个简单的测试来查看：http: //jsperf.com/on-screen-vs-off
看起来 Chrome 和 Safari 肯定会优化它，至少在简单的情况下，而 firefox 并没有
于 2012-08-07T14:58:06.110 回答