javascript - HTML5 - 如何绘制完成的 Canvas /图像

Question

我正在使用 HTML5 和 MooTools 制作一个小游戏，但在 Firefox 上遇到性能问题。我实现了一个计数器来确定调用 update 方法的频率，并且它每秒返回 64 次。结果看起来慢得多(比如 30 FPS)。我认为我的问题实际上在这篇文章http://blog.sethladd.com/2011/03/measuring-html5-browser-fps-or-youre.html中有描述。 。我找不到直接解决这个问题的方法，但我认为我可以优化性能。

我认为我的逻辑中的一个大问题是我直接在 Canvas 上绘制每个对象。我之前用 Java 做过一些游戏，通过操作图像(在内存中绘制)和仅绘制最终图像，我的性能得到了很大的提高。这样，浏览器绘制某些内容的请求就会少得多，并且绘制速度可能会更快。

有办法做到这一点吗？我找到了一些用 JavaScript 进行图像处理的库，但我想自己动手。

我无法向您展示完整的代码，因为该项目是供学校使用的，而且它太大(约 1500 行代码)。

Answer 1

http://www.html5rocks.com/en/tutorials/canvas/performance/

也许这会有所帮助。它向您展示了如何使用屏幕外 Canvas 渲染场景来提高性能。