Javascript 在画布上滚动巨大的背景_Javascript_Html_Canvas_Background

Javascript 在画布上滚动巨大的背景

javascript html canvas

Javascript 在画布上滚动巨大的背景,javascript,html,canvas,background,Javascript,Html,Canvas,Background,我的问题是，我工作的公司已经开始为我为他们制作的游戏提供艺术，它有一个巨大的世界！它给了我一个巨大的背景图像，像12923x5356巨大我现在可以让它像背景一样滚动和工作，但在我的旧电脑thinkcenter上有点慢（注意，它只能运行crunchbang和xp）。请看，我们希望能够为此支持平板电脑。它还进一步使事情复杂化，因为它们有一个同样大的覆盖层现在我只画了一块画布大小的背景，所以它只画了通过使用 ctx.drawImage(img, x, y, width, height, dx, d

我的问题是，我工作的公司已经开始为我为他们制作的游戏提供艺术，它有一个巨大的世界！它给了我一个巨大的背景图像，像12923x5356巨大

我现在可以让它像背景一样滚动和工作，但在我的旧电脑thinkcenter上有点慢（注意，它只能运行crunchbang和xp）。请看，我们希望能够为此支持平板电脑。它还进一步使事情复杂化，因为它们有一个同样大的覆盖层

现在我只画了一块画布大小的背景，所以它只画了通过使用

ctx.drawImage(img, x, y, width, height, dx, dy, dwidth, dheight);

dx/dy始终绘制到同一点，x/y滚动显示主字符

现在现实地说，有没有可能更快地做到这一点？我能想到的另一种方法是，用getImageData将图像分解成小块，然后用ctx.putImageData（img，x，y）填充屏幕。根据经验，我非常确定drawImage的小格式比长格式快一点，但这会快很多吗

其他人有什么想法可以向我开枪吗

你可以把它做成更小的瓷砖，就像谷歌地图那样

我不确定你是否正在处理一些巨大的游戏地图，但技术应该是一样的。您可以将地图拆分为小块，例如256px*256px。然后您只需要几个256px*256px

div

来覆盖视口。如果改用

canvas

，则相同。只需渲染当前显示给用户的平铺