我一直在编写一个教程（http://glacialflame.com/category/tutorial/）来构建一个等距游戏引擎，但我希望地图以角色为焦点移动。
所以，当你移动时 - 地图以角色为中心。
我在这里有一个小的PasteBin： http://pastebin.com/U75Pz4Yy
在此处查看此操作： http://www.wikiword.co.uk/release-candidate/canvas/newEngine/index.html
根据要求提供小提琴！ http://jsfiddle.net/neuroflux/vUxYg/2/
注意：的 这仅适用于HTML5和Canvas浏览器，如果您使用的是IE6，请不要抱怨;）
任何想法和帮助都会受到赞赏，我想我可以通过分别用+1或-1更新数组中的每个“磁贴”来做到这一点，但我似乎无法为磁贴做一个ForEach循环已经在画布上的图像。
提前干杯！
答案 0 :(得分：2)
有几种方法可以解决这个问题：
您可以移动整个画布，删除不可见的元素（最终）。那么如果左上角是-257467,374672怎么办？这只是渲染器的一个附加功能。
您可以移动时间图像，而不是移动画布。因此，为地图片段的所有样式元素创建一个数组，然后在循环中移动background-image样式。地图元素保持不变，只有图像发生变化。
您可以创建/删除DOM节点并移动现有节点。但根据我的经验，这是非常昂贵的（因为浏览器需要弄清楚你改变了什么，然后更新DOM树，刷新渲染缓存，渲染你再次改变的部分，创建和销毁许多对象，......）
答案 1 :(得分：1)
移动地图应该像玩家位置翻译上下文一样简单。
当玩家移动X或Y时，画布也应移动相同的数量（或负数）
我没有找到合适的偏移量来让兔子总是在屏幕的中心，但它应该让你知道它是如何完成的。
答案 2 :(得分：0)
我可以给出一个想法，而不是只有一个画布，你可以管理3个画布并将它们设置为3个具有绝对定位的div，这样每个div都建立在前一个透明背景之上。
画布将比可见的游乐场大（可以使用溢出css设置进行管理）。玩家总是在游乐场的中心。移动时，浏览器将不再重绘背景和顶层，只需处理div位置，即可完成图形工作。
之后会出现加载新背景图块的问题，可以通过一些隐藏的画布预加载来处理。这种分层画布的方式可以应用于其他图层（活动标记图层，其他玩家图层等），它是一个'sprite-layer-in-div'，其中浏览器图形引擎执行大部分最终屏幕图像渲染。 / p>