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

标签 javascript image html canvas game-engine

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

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

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

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

最佳答案

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

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

关于javascript - HTML5 - 如何绘制完成的 Canvas /图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13077181/

相关文章:

javascript - 返回函数供进一步使用,但不存储旧结果

java - 如何在 Jframe java(eclipse) 中加载图像?

html - 将 Bootstrap 列居中

JavaScript:提高 FOR 循环的性能以阻止浏览器锁定?

javascript - 从 js/jquery 中的对象数组播放音频文件

javascript - 在另一个上下文中设置变量

javascript - 创建用户命名变量?

javascript - 在HTML表单中添加JavaScript计算功能

javascript - 从 JavaScript 更新属性并删除数组中的重复元素

css - 是否可以使图像始终显示最小高度,同时始终保持最小 100% 宽度?