html5中的2D侧滚动摄像机视图

Question

我想知道如何制作类似相机的视图，我可以在画布元素中滚动一个级别，如下所示：

http://playbiolab.com/

Answer 1

所以你想要一个500x500的画布来显示真正9000x500左右的东西（游戏关卡）。

这很好。你所做的就是将画布视为更大场景的“视口”。您将画布（或其他所有内容）转换为适当的位置，并在该位置绘制所有相关内容。

以下是一个例子：

http://jsfiddle.net/hKrrY/

单击画布并按住左箭头键以查看当红色玩家点保持“静止”时的场景。

当您在100x100画布上滚动时，您会看到一次在屏幕外位置绘制的对象，如（330,50）。翻译画布会让他们进入视野。

---

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

所以这个概念就是这里的概念，但你会想要很好地思考如何实现它以及你做画布的工作量。如果您在横向滚动应用中遇到性能问题，请务必告诉我们：）

Answer 2

我总是发现将画布包装在div中，视口的宽度和高度以及溢出设置为隐藏效果更高效，然后只绘制整个画布并将div滚动到您要查看的位置。

所以html会是：

<div id='wrapper' style='width: 200px; height: 200px; overflow: hidden;'>
     <canvas width='1000' height='1000'></canvas>
</div>

，javascript就像

function scrollWrapper(x, y){
    var wrapper = document.getElementById('wrapper');  
    wrapper.scrollTop = x;
    wrapper.scrollLeft = y;
}

然后只需使用要查看的x和y调用该函数。如果你想移动那里而不是只是跳到那里，你可以将它包装在一个setTimeout或其他东西中。