Javascript/HTML5 画布重绘

Question

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

我当前使用的策略是在相同大小（640x480）的内存画布中绘制可见对象，然后每次移动时将其重新绘制到视图中。

然而，世界、物体和它们的位置不会改变。 实际上，可以将其视为单个大图像。

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

Answer 1

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

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

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

我建议你做这样的事情：

• 有一个 640x480 的画布
• 虚拟世界大小为 2000x2000 像素
• 让您的游戏将所有内容渲染到上下文，然后将上下文转换到相机位置，然后从该点开始渲染 640x480 像素。
• 你的“世界”将是静态的，但相机会四处移动并“看”在一个点上进行渲染