javascript - html5 中的 2D 侧滚动相机 View

Question

我想知道如何制作类似相机的 View ，我可以像这样在 Canvas 元素中滚动一个级别:

http://playbiolab.com/

Answer 1

因此，您需要一个 500x500 的 Canvas 来显示实际为 9000x500 左右的东西(游戏关卡)。

这很好。您所做的是将 Canvas 视为更大场景的“视口(viewport)”。您将 Canvas (或其他所有内容)平移到适当的位置，并在该位置绘制所有相关内容。

这是一个例子:

http://jsfiddle.net/hKrrY/

单击 Canvas 并按住向左箭头键以查看场景经过，同时红色播放器点保持“静止”。

当您在 100x100 的 Canvas 上滚动时，您会看到在一次屏幕外的位置绘制的对象，例如 (330,50)。翻译 Canvas 将它们带入 View 。

---

我想值得一提的是，这就是在 Canvas 中进行优化开始真正重要的地方。我在上面给出的示例是制作视口(viewport)的一种非常简单的方法，随着代码的进展，您将越来越多地考虑要绘制的是什么以及绘制了多少。例如，您需要避免绘制完全在屏幕外的对象，如果您的游戏或应用程序的背景为 9000x500，您可能不希望每次都绘制整个对象!

所以概念是这里的要点，但您需要认真考虑如何实现它以及您使 Canvas 完成了多少工作。如果您最终在横向滚动应用中遇到性能问题，请务必告知我们:)