使用不同屏幕尺寸的画布

Question

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

所以我想知道如何<canvas>在不同的屏幕尺寸上使用(全屏显示).

Answer 1

所以我想知道如何在不同的屏幕尺寸上使用(全屏显示).

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

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

因此,您真的希望在一组与屏幕或画布大小无关的"模型"坐标中进行游戏.由于您只针对两种屏幕尺寸,因此您的模型坐标可能是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;