Javascript html5 中的 2D 侧滚动相机视图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7909583/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
2D side scrolling camera view in html5
提问by Oni Enzeru
I was wondering how I could go about making a camera-like view where I could scroll a level within a canvas element just like this:
我想知道如何制作类似相机的视图，我可以像这样在画布元素中滚动一个级别：
回答by Simon Sarris
So you want a 500x500 canvas to display something (a game level) that is really 9000x500 or so.
所以你想要一个 500x500 的画布来显示一些真正 9000x500 左右的东西（一个游戏关卡）。
This is fine. What you do is think of the canvas as a "viewport" for a larger scene. You translate the canvas (or everything else) to the appropriate spot and draw all of the relevant things at that spot.
这可以。您所做的是将画布视为更大场景的“视口”。您将画布（或其他所有东西）翻译到适当的位置并在该位置绘制所有相关的东西。
Here's an example:
下面是一个例子：
Click on the canvas and hold down your left arrow key to see the scene go by while the red player dot stays "still".
单击画布并按住左箭头键以查看场景经过，而红色玩家点保持“静止”。
As you scroll by the 100x100 canvas, you are seeing objects that are being drawn at once-offscreen locations like (330,50). Translating the canvas brings them into view.
当您滚动 100x100 画布时，您会看到在屏幕外的位置（例如 (330,50)）绘制的对象。翻译画布将它们带入视野。
I guess its worth mentioning that this is where making optimizations in a canvas starts to really matter. The example I gave above is a very simplistic way to make a viewport, and as your code progresses you're going to want to think more and more about what it is you're drawing and how much you're drawing. You'll want to avoid drawing objects that are completely offscreen, for instance, and if your game or app has a background that is 9000x500 you probably don't want to be drawing the entire thing every time!
我想值得一提的是，这是在画布中进行优化开始真正重要的地方。我上面给出的例子是一种非常简单的制作视口的方法，随着你的代码的进展，你会越来越想知道你正在绘制什么以及你绘制了多少。例如，您需要避免绘制完全离屏的对象，如果您的游戏或应用程序的背景为 9000x500，您可能不想每次都绘制整个对象！
So the concept is the takeaway here, but you'll want to think very hard about how you implement it and how much work you are making the canvas do. If you end up with performance problems in your side-scrolling app, be sure to let us know :)
所以这个概念是这里的要点，但是您需要非常认真地考虑如何实现它以及您使画布做了多少工作。如果您最终在横向滚动应用程序中遇到性能问题，请务必让我们知道 :)
回答by hobberwickey
I've always found it's more efficient to wrap your canvas in a div with the width and height of your viewport and the overflow set to hidden then just draw your whole canvas and scroll the div to where you where you want to view.
我一直发现将画布包裹在一个 div 中更有效，其中视口的宽度和高度以及溢出设置为隐藏，然后只需绘制整个画布并将 div 滚动到您想要查看的位置。
So the html would be:
所以html将是：
<div id='wrapper' style='width: 200px; height: 200px; overflow: hidden;'>
<canvas width='1000' height='1000'></canvas>
</div>
and the javascript would be something like
和 javascript 会像
function scrollWrapper(x, y){
var wrapper = document.getElementById('wrapper');
wrapper.scrollTop = x;
wrapper.scrollLeft = y;
}
Then just call the function with the x and y you want to view. you could wrap it in a setTimeout or something if you wanted to move there instead of just jumping there.
然后只需使用要查看的 x 和 y 调用该函数。如果您想移动到那里而不仅仅是跳到那里，您可以将它包装在 setTimeout 或其他东西中。
