从画布上绘图需要多少时间？答案

【问题标题】：How much time does drawing out of the canvas cost?从画布上绘图需要多少时间？
【发布时间】：2012-08-07 14:42:53
【问题描述】：

我知道 HTML5 gamedev 中最昂贵的操作之一是在画布上绘图。但是，在它外部绘制图像呢？那有多贵？当画布为 100 x 100 像素并且我尝试在 (1000, 1000) 处绘制图像时，究竟会发生什么？检查精灵坐标以确保它在画布内会提高渲染效率吗？

【问题讨论】：

【解决方案1】：

在这些测试中，我使用了 Google Chrome 版本 21.0.1180.57。

我做了一个小小提琴来测试这种情况......你可以在这里查看：http://jsfiddle.net/Yannbane/Tnahv/。

我已经运行了 1000000 次测试，这是我得到的数据：

在画布内渲染图像持续了 2399 毫秒。
在画布外渲染图像持续了 888 毫秒。

这意味着在画布外绘制确实需要一些时间，大约是在画布内部渲染所需时间的 37%。

结论：最好在渲染之前检查图像是否在画布内。

但是，当然，我想知道好多少……所以，我又做了一次测试。这一次，我当然实现了边界检查，并得到只用了 3 毫秒 将图像“渲染”到画布外 1000000 次。这比简单地在外面渲染要好 29600%。

您可以在此处查看这些测试：http://jsfiddle.net/Yannbane/PVZnz/3/。

【讨论】：

【解决方案2】：

如果图形超出屏幕，您需要自己执行此检查并跳过绘图。

话虽如此，某些浏览器确实在某些情况下对此进行了优化。不久前，我在写一篇关于 IE9 性能分析器的文章时发现，如果图像超出范围，IE9 将优化绘制图像。转换矩阵可能必须是恒等式才能使此优化起作用，并且无论哪种方式，您都不应该依赖浏览器来执行此操作。

始终检查。

编辑：您可以运行这个简单的测试来查看：http://jsperf.com/on-screen-vs-off

看起来 Chrome 和 Safari 肯定会优化它，至少在简单的情况下是这样，而 firefox 并没有真正优化

【讨论】：