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

Question

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

score 26 · Accepted Answer

因此，您需要一个 500x500 的画布来显示真正 9000x500 左右的东西（游戏关卡）。

这可以。您所做的是将画布视为更大场景的“视口”。您将画布（或其他所有内容）翻译到适当的位置并在该位置绘制所有相关的东西。

这是一个例子：

单击画布并按住左箭头键可查看场景经过，而红色播放器点保持“静止”。

当您滚动 100x100 画布时，您会看到在 (330,50) 等离屏位置绘制的对象。翻译画布将它们带入视野。

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

所以这个概念是这里的要点，但是你需要非常努力地思考你是如何实现它的，以及你在画布上做了多少工作。如果您最终在横向滚动应用程序中遇到性能问题，请务必让我们知道 :)

score 6 · Accepted Answer

我一直发现将画布包装在 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 或其他东西中。

2 回答 2