Javascript / HTML5画布重绘

时间:2016-09-29 09:49:38

标签: javascript html5-canvas

我有一个平均大小的" world&#34 ;,一个包含可见对象的2D平面。如果完整显示,它的尺寸至少约为2000x2000像素。但是,只有一部分被绘制在画布(640x480)的屏幕上,名为" view"。用户可以在这个世界中移动视图。

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

但是,世界,物体及其位置不会改变。实际上,它可以被认为是一个单一的大图像。

拥有2000x2000(或更多)缓冲画布,然后将其中的一部分绘制到可见画布上会更好吗?或者我应该坚持我当前的策略:拥有640x280缓冲区并只绘制可见对象?

1 个答案:

答案 0 :(得分:1)

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

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

根据您的实现,您可能还想绘制几乎"几乎"如果视图(相机)的移动速度相当快,则可见。

我建议你这样做:

  • 拥有一张640x480画布
  • 虚拟世界大小为2000x2000像素
  • 让游戏将所有内容渲染到上下文中,然后将上下文转换为相机位置,然后从此处开始渲染640x480像素。
  • 你的世界"然后是静止的,但是相机会四处移动并且看起来像#34;在一个点上呈现