使用不同屏幕尺寸的画布 [英] Working with canvas in different screen sizes

问题描述

我打算使用HTML5 < canvas> 标签创建一个简单的游戏，并使用Phonegap将代码编译为本机应用程序，但问题是 canvas 使用不是相对于其大小的坐标，因此在$ 960x640屏幕上的 20,20

I'm planing to create a simple game using the HTML5 <canvas> tag and compile the code into a native application using Phonegap, but the problem is that canvas use coordinates that are not relative to the size of it, so 20,20 on a 960x640 screen is different on a 480x800 one.

因此，我想知道如何使用< canvas>

So I want to know how to work with a <canvas> (which will be in fullscreen) on different screen sizes.

推荐答案

所以我想知道如何使用

So I want to know how to work with a (which will be in fullscreen) on different screen sizes.

这是一个常见的问题，有一个很容易的解决方案。通常这是通过将硬画布坐标与有时称为模型坐标的分开来实现的。

This is a common problem that has a pretty easy resolution. Often this is done by separating hard canvas coordinates from what is sometimes called "model" coordinates.

这取决于你的代码是如何组织的，一些高度和宽度，占据了大部分或全部的屏幕。您定位的屏幕的两个宽高比为1.5和1.666，因此您需要满足较小的一个。

It really depends on how your code is organized, but I assume the game has some height and width to the world that takes up most or all of the screen. The two aspect ratios of the screens you are targeting are 1.5 and 1.666, so you'll want to cater to to the smaller one

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

So you'll really want to do your game in a set of "model" coordinates that have no bearing on the screen or canvas sizes. Since you are only targeting two screen sizes, your model coordinates can perhaps be 960x640 since that is the smaller of the two aspect ratios. It doesn't have to be. It could be 100x50 for your model coordinates instead. But this example we'll use 960x640 as our model coordinates.

在内部，你从不使用这些模型坐标。

Internally, you never use anything but these model coordinates. You never ever think in any other coordinates when making your game.

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

When the screen size is 960x640 you won't have to change anything at all since its a 1:1 mapping, which is convenient.

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

Then when the screen size is actually 800x480, when it comes time to draw to the screen, you'll want to translate all of the model coordinates by (3/4), so the game will be made and internally use 960x480, but it will be drawn in the area of (720x480). You'll also want to take any mouse or touch input and multiply it by (4/3) to turn the screen coordinates into model coordinates.

此翻译可以是很容易在绘制所有内容之前调用 ctx.scale（3/4，3/4）。

This translation can be as easy as calling ctx.scale(3/4, 3/4) before you draw everything.

平台将有代码，所有的书假设游戏的大小为960x640。模型坐标成为屏幕坐标的唯一时间是绘制到画布（其大小不同），并将画布鼠标/触摸坐标转换为模型坐标。

So both platforms will have code that is all written assuming the game is a size of 960x640. The only time that model coordinates become screen coordiantes is when drawing to the canvas (which is a different size) and converting canvas mouse/touch coordinates to model coords.

如果看起来很混乱，我可以尝试做样本。

If that seems confusing to you I can try and make a sample.

这篇关于使用不同屏幕尺寸的画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！