我知道HTML5 gamedev中最昂贵的操作之一就是在画布上绘图。但是，如何在之外的中绘制图像呢？这有多贵？当画布是100 x 100像素并且我尝试在（1000,1000）处绘制图像时到底发生了什么？检查精灵坐标以确保它在画布内部会使渲染更有效吗？
答案 0 :(得分：7)
在这些测试中，我使用的是Google Chrome版本21.0.1180.57。
我做了一个测试这种情况的小提琴......你可以在这里查看：http://jsfiddle.net/Yannbane/Tnahv/。
我已经运行了1000000次测试，这是我得到的数据：
在画布内渲染图像持续2399毫秒。
在画布外渲染图像持续888毫秒。
这意味着在画布之外绘图需要花费一些时间，大约是将其渲染到内部所需时间的37％。
结论：最好在渲染之前检查图像是否在画布内。
但是，当然，我想知道有多好......所以，我做了另一次测试。这一次，我当然实现了边界检查，并得到了它只花了3毫秒来“渲染”画布外100万次的图像。这比仅仅在外面渲染它要好29600％。
您可以在此处查看这些测试：http://jsfiddle.net/Yannbane/PVZnz/3/。
答案 1 :(得分：3)
您需要自己执行此检查，如果图形不在屏幕内，请跳过绘图。
话虽如此，一些浏览器在某些情况下会对此进行优化。我在IE9性能分析器上写了一篇文章时发现，IE9将优化远离绘制图像，如果它超出界限。转换矩阵可能必须是此优化的标识才能工作，无论哪种方式，您都不应该依赖浏览器来执行此操作。
始终经常检查。
编辑：您可以运行此简单测试以查看：http://jsperf.com/on-screen-vs-off
看起来Chrome和Safari肯定会对它进行优化，至少在简单的情况下，firefox并不是真的