javascript - HTML5 Canvas 2D 相机并且只在屏幕上渲染东西？

Question

我目前正在开发一款游戏，它非常简单而且非常小。但我真的希望某些级别大于视口的实际大小。例如，我的画布尺寸是 740x440，但我实际上想要一个非常像 2000x440 的关卡。

所以我尝试使用 .translate() 方法模拟一个基本的 2D 相机。它工作正常，但性能非常糟糕，可能是因为我一次渲染所有内容。

.translate() 是要走的路吗？如果是这样，那么渲染仅由相机查看的事物的好方法是什么？

Answer 1

您应该考虑“层”，它们是堆叠在一起的多个画布。这样，每个动画每层都是独立的。

假设您有一个在视口内移动但不移开景观的角色。您可以在一层中放置角色，在另一层中放置风景，并且仅对角色层进行动画处理。这样，只有角色被重绘，而不是整个场景。