Question

我计划使用HTML5 <canvas>标记创建一个简单的游戏，并使用Phonegap将代码编译到本机应用程序中，但问题是canvas使用的坐标与它的大小，因此960x640屏幕上的20,20在480x800屏幕上是不同的。

所以我想知道如何使用不同屏幕尺寸的<canvas>（全屏显示）。

Answer 1

所以我想知道如何在不同的屏幕尺寸上使用（全屏显示）。

这是一个非常容易解决的常见问题。通常，这是通过将硬画布坐标与有时称为“＃34; model＆＃34;坐标。

这实际上取决于你的代码是如何组织的，但我认为游戏对于占据大部分或全部屏幕的世界都有一定的高度和宽度。您定位的屏幕的两个宽高比分别为1.5和1.666，因此您需要迎合较小的一个

所以你真的想用一套＆＃34;模型＆＃34;来做你的游戏。与屏幕或画布大小无关的坐标。由于您只定位两种屏幕尺寸，因此您的模型坐标可能为960x640，因为这是两个纵横比中较小的一个。它不是必须的。相反，它可能是100x50的模型坐标。但是这个例子我们将使用960x640作为我们的模型坐标。

在内部，除了这些模型坐标，你永远不会使用任何东西。在制作游戏时，你永远不会想到任何其他坐标。

当屏幕尺寸为960x640时，您不需要更改任何内容，因为它是1：1的映射，这很方便。

然后当屏幕尺寸实际为800x480时，当需要绘制到屏幕时，您想要将所有模型坐标翻译为（3/4），因此游戏将在内部进行使用960x480，但它将在（720x480）区域绘制。您还需要接受任何鼠标或触摸输入并将其乘以（4/3）以将屏幕坐标转换为模型坐标。

这种翻译就像在绘制所有内容之前调用ctx.scale(3/4, 3/4)一样简单。

因此，假设游戏的大小为960x640，两个平台都会编写代码。模型坐标成为屏幕坐标的唯一时间是绘制到画布（尺寸不同）并将画布鼠标/触摸坐标转换为模型坐标。

如果这对您来说很困惑，我可以尝试制作样本。

Answer 2

使用innerWidth/innerHeight对象的window：

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

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

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

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

Answer 3

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