HTML5画布2D相机，只在屏幕上渲染内容

HTML5 Canvas 2D Camera and only rendering things on the screen?

本文关键字：屏幕 2D 画布相机 HTML5 更新时间：2023-09-26

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

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

.translate（）是要走的路吗？如果是这样，那么渲染仅由摄像机查看的内容的好方法是什么？

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

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