HTML5中的2D侧滑摄像机视图

Question

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

http://playbiolab.com/

- Oni Enzeru

---

+1：非常老派且令人上瘾的游戏。 ;) - freakish

简单。保存(); 翻译(-camera.x, -camera.y); 全部绘制(); 恢复(); - user2039981

相关：HTML5 Canvas相机/视口 - 如何实际操作？ - ggorlen

Answer 1

如果您想展示一个真正大小为9000x500左右的东西（例如游戏关卡）在一个500x500的画布上，这是没问题的。

您需要将画布视为更大场景的“视口”。将画布（或其他所有物体）移动到适当的位置，并在该位置绘制所有相关物品即可。

以下是一个示例：

http://jsfiddle.net/hKrrY/

单击画布并按住左箭头键，可以看到场景滚过，而红色玩家点保持“静止”。

当您滚动100x100的画布时，您会看到被绘制在窗口外的物体，例如（330,50）。通过翻译画布，它们就出现在视野中了。

---

我认为值得提的是，在画布中进行优化非常重要。上面给出的示例是制作视口的一种非常简单的方法，但随着代码的发展，您会越来越想知道自己正在绘制什么以及绘制了多少。例如，您将要避免绘制完全在屏幕之外的对象，如果您的游戏或应用程序有一个大小为9000x500的背景，则可能不希望每次都绘制整个背景！

所以这里的重点是概念，但您需要认真考虑如何实现它以及让画布执行多少工作。如果您在侧向滚动应用程序中遇到性能问题，请务必告知我们 :)

- Simon Sarris

---

看看我的另一条评论。现在可以做得更好，通过javascript减少像素以进行触摸，并启用pwnage模式 :-) - user1610743

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或其他一些内容中。

- hobberwickey

---

绘制整个画布必须要慢。 - scottheckel

如果你只是绘制画布一次，然后只更新正在更改的内容，那就很好了，特别是如果你只是跟踪而不实际绘制屏幕外发生变化的任何内容。 - hobberwickey

+1 这条路线。为了给你留下印象：我的 640*480 像素画布运动，使用 getImageData 和 putImageData 在 requestAnimationFrame 上几乎占用了 CPU 核心的 80%（i7 4770k Haswell）；使用这种方法，我将其降低到了约 10%！这几乎是一个数量级，无论 fps 计数器显示什么，它都感觉更加流畅（可能是因为浏览器滚动的抗锯齿效果）。教程：使用 overflow:scroll 制作一个较小的周围 DIV，将鼠标滚轮事件绑定到带有 e.preventDefault() 的函数上，并使用 .scrollTop！这会让一切变得更有趣！ - user1610743

向包裹 div 添加 overflow:hidden - kurumkan