在不同屏幕尺寸下使用画布

Question

我打算使用HTML5的<canvas>标签创建一个简单的游戏，并使用Phonegap将代码编译成本地应用程序。但问题在于，canvas使用的坐标与其大小无关，因此在960x640屏幕上的20,20与480x800的屏幕上不同。

因此，我想知道如何在不同屏幕尺寸上使用全屏的<canvas>。

- Nathan Campos

Answer 1

所以，我想知道如何在不同的屏幕尺寸上使用全屏运行的游戏。这是一个普遍存在的问题，解决起来相当容易。通常情况下，这可以通过将硬画布坐标与“模型”坐标分离来完成。具体取决于您的代码组织方式，但我假设游戏具有一定高度和宽度的世界，该世界占据了大部分或全部屏幕。您所针对的屏幕宽高比为1.5和1.666，因此您需要考虑适配较小的那个。

因此，您确实希望在一组“模型”坐标中进行游戏，这些坐标与屏幕或画布大小无关。由于您只瞄准两个屏幕尺寸，因此您的模型坐标可以是960x640，因为这是两个宽高比中较小的一个。它也不必是这么大，例如100x50，但在本例中我们将使用960x640作为我们的模型坐标。

在内部，您从未使用除这些模型坐标以外的任何坐标。制作游戏时，您永远不会以任何其他坐标思考。

当屏幕尺寸为960x640时，您什么也不需要改变，因为它是一对一的映射，这非常方便。

然后当屏幕尺寸实际上是800x480时，在绘制到屏幕时，您将希望将所有模型坐标平移(3/4)，以便游戏将使用960x480进行内部处理，但在(720x480)的区域中绘制。您还需要将任何鼠标或触摸输入乘以(4/3)，将屏幕坐标转换为模型坐标。

这个翻译可以简单地调用ctx.scale(3/4, 3/4)来完成。

因此，两个平台将都具有假定游戏大小为960x640的代码。模型坐标变成屏幕坐标的唯一时间是在绘制到画布(不同尺寸)和将画布鼠标/触摸坐标转换为模型坐标时。

如果这对您来说很困惑，我可以尝试制作一个示例。

- Simon Sarris

---

ctx.scale可以使用，但会使位图有点模糊（即使缩小比例）。解决方法是为每个分辨率（范围）准备不同的图像集合，对吗？ - User

为什么要进行这些显式的缩放？在HTML中使用宽度/高度设置您的“模型”大小，并在所有地方使用这些坐标未经缩放。然后使用CSS使您的<canvas>的物理大小与屏幕匹配。浏览器将在内部处理所有缩放（包括智能手机方向更改时），使其看起来您始终可以随时访问整个模型坐标大小。唯一需要显式缩放的是鼠标输入坐标，它们将与屏幕的物理大小而不是<canvas>的模型大小相关联。 - Chuck Kollars

Answer 2

使用 window 对象的 innerWidth/innerHeight：

canvas.height = window.innerHeight;
canvas.width = window.innerWidth;

它会自动调整任何屏幕; 你必须测试跨平台/屏幕的兼容性！

此外，不要使用预定义的 x,y 坐标，使用类似以下的内容：

var innerWidth = window.innerWidth;
x = innerWidth / 3;

- Muaz Khan

Answer 3

由于您只有两种屏幕尺寸，因此可以使用两个不同大小的画布（及其背后的逻辑）来处理不同的尺寸。
如果您不喜欢这个解决方案，我认为您只能使用百分比大小而不是像素绝对尺寸。 最后但并非最不重要的是，请尝试在元标记中设置不同的值。

- andreapier