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

我打算使用HTML5 <canvas>标记创建一个简单的游戏，并使用Phonegap将代码编译为本机应用程序，但问题是canvas使用的坐标与大小无关的，因此在960x640屏幕上的20,20在480x800上不同。在不同屏幕尺寸下使用画布

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

因此，我想知道如何在不同的屏幕尺寸下使用（它将全屏显示）。

这是一个很容易解决的常见问题。通常这是通过将硬画布坐标与有时称为“模型”的坐标分开来完成的。

这真的取决于你的代码是如何组织的，但我认为游戏有一定的高度和宽度，占据了大部分或全部屏幕。你的目标屏幕的两个长宽比是1.5和1.666，所以你会想迎合较小的一个

所以你真的想要在一组“模型”坐标对屏幕或画布尺寸没有影响。由于您只定位了两种屏幕尺寸，因此您的模型坐标可能为960x640，因为这是两个屏幕比例中较小的一个。它不一定是。相反，您的模型坐标可能为100x50。但是这个例子我们将使用960x640作为我们的模型坐标。

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

当屏幕尺寸为960x640时，您不必改变任何东西，因为它是1：1映射，这很方便。

然后，当屏幕尺寸实际上是800x480，当它画到屏幕上时，您需要翻译所有的模型坐标（3/4），所以游戏将被制作并在内部使用960x480，但会在（720x480）的区域绘制。您还需要采取任何鼠标或触摸输入，并乘以（4/3）将屏幕坐标转换为模型坐标。

在绘制所有内容之前，该翻译可以简单地称为ctx.scale(3/4, 3/4)。

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

如果这看起来让你感到困惑，我可以尝试做一个示例。window对象的

2011-12-24 19:23:46

ctx.scale的作品，但让点阵图有点模糊（甚至缩小）。对此的解决方案将是为每个分辨率（范围）有不同的图像集，对吗？ – Ixx 2012-04-04 12:13:55

为什么所有这些显式缩放？使用HTML中的宽度/高度来设置“模型”大小，并使用UNscaled无处不在的坐标。然后使用CSS使您的

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

2011-12-24 15:12:40 andreapier

使用innerWidth/innerHeight：

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

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

此外，而不是使用预先定义的x,y坐标，使用这样的：

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

2011-12-25 04:30:39

回答