Javascript/HTML5画布重绘

Question

我有一个平均大小的“世界”，一个包含可见对象的2D平面。如果全部显示，其尺寸至少约为2000x2000像素。但是，只有一部分被画到屏幕上（640x480），称为“视图”。用户可以在这个世界上移动视图。

我使用的当前策略是在同一尺寸（640x480）的内存中绘制可见对象，然后在每次移动时将其重绘为视图。

但是，世界，对象和他们的位置不会改变。实际上，它可以被认为是一个大的图像。

拥有一个2000x2000（或更多）缓冲区画布，然后将其一部分绘制到可见画布上会更好吗？或者我应该坚持我目前的策略：有一个640x280缓冲区，并只绘制可见物体？

Answer 1

假设每一帧都更新世界。这意味着世界需要每一帧都要重新渲染，因为这个位置可能已经改变了。

从性能角度来看，我宁愿让游戏循环检查哪些对象是可见的，只绘制这些对象，而不是渲染整个世界并选择640x480像素区域。

根据您的实施情况，如果视图（相机）的移动速度相当快，您可能还想绘制“几乎”可见的对象。

我建议你做这样的事情：

• 有一个640×480的画布
• 拥有2000x2000像素
• 虚拟世界大小有你的游戏渲染一切的背景下，再改造上下文到摄像头的位置，然后渲染从这个点开始的640x480像素。
• 然后，您的“世界”将是静态的，但相机将四处移动并“看”某个点以呈现