javascript - 带视口(viewport)的 HTML5 等距 Canvas - 性能非常差

标签 javascript html css canvas kineticjs

我修改了kinetic-viewport 库来制作可滚动 map ,但我遇到了与性能相关的问题。我制作了 30x20 矩形,它们旋转了 120*。如您所见,这非常简单,但它滞后很多,我想知道如果我将图像放在它们上面然后制作一些 Sprite 和动画会发生什么?我想游戏将无法玩。

我做错了什么?我以前从未写过游戏,只是商业网站。也许我应该在编写游戏时换个思路?

演示 - 按 RMB 滚动。使用 Mousewell 缩放 - http://godlike.hekko.pl/kinetic-viewport/demo.html

来源 - http://godlike.hekko.pl/inne/kinetic-viewport.7z

问候

最佳答案

我看到你在使用 setInterval:你最好使用 requestAnimationFrame可用的 API,因为它专为动画而设计,可为您提供更好的帧速率和更少的 CPU 使用率(因此,如果您还针对移动设备,则电池使用率更低)。

如果您打算制作一款卷轴游戏,您不妨尝试一些专门为游戏设计的东西;我推荐 Canvace ,我也参与其中。:)

关于javascript - 带视口(viewport)的 HTML5 等距 Canvas - 性能非常差,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13013511/

相关文章:

javascript - 通过html按钮更改变量

javascript - 在表格单元格jquery中选择div

javascript - 如何在按下 F5 或刷新按钮时仅刷新页面的一部分

Javascript 菜单悬停事件不适用于 JQuery 加载的 html

javascript - CSS 解决方案仅使用鼠标滚轮滚动当前 div - 而不是其后面的 div。

javascript - Bootstrap 确认图标未显示

javascript - 如何使用一个函数单独选择每个下拉列

javascript - Div 在另一个 div 下方并在悬停时显示过渡

html - 在所有浏览器中以 45 度显示文本

javascript - Chrome 中可点击的圆形 Canvas Angular