正确缩放 Javascript Canvas 游戏

我正在尝试根据屏幕尺寸动态缩放画布游戏。我了解如何根据屏幕尺寸调整画布大小，但我也想调整内容大小。基本上我希望游戏在每台设备上看起来都一样。我目前遇到的问题是，当拥有 4k 屏幕的人玩游戏时，他们可以轻松看到整个地图。当有人的屏幕非常小时，他们几乎看不到任何东西。有没有一种简单有效的方法来做到这一点？我尝试执行以下操作：

var maxWidth = 1920;
var maxHeight = 1080;

...

function resize() {
    c.width = screenWidth = window.innerWidth;
    c.height = screenHeight = window.innerHeight;
    widthToHeight = screenWidth / screenHeight; // ASPECT RATIO

    var scalerAmnt = (maxWidth + maxHeight )
            / (screenWidth + screenHeight);
    context.scale(scalerAmnt, scalerAmnt); 
}

如果我像这样缩放画布，则会产生不良结果。它偏离了中心，而且太大了。正如你所看到的，我设置了最大宽度和高度。基本上，我试图让游戏在每台设备上看起来与在具有该分辨率的机器上看起来相同。

现场演示：www.vertix.io

UPDATE: Here is an Image of what it currently looks like:

您将面临一些问题。

如果不设置，高分辨率显示器将显示模糊ctx.imageSmoothingEnabled = false如果不设置，低分辨率显示器将显示锯齿效果ctx.imageSmoothingEnabled = true.

最好是不要超过最大分辨率。这是任意的，我的选择是使用大多数人使用的屏幕分辨率。一个例子屏幕统计 http://www.rapidtables.com/web/dev/screen-resolution-statistics.htm有许多网站提供此信息。选择最接近您的人口统计目标的一项。

对于大于此尺寸的显示器，不要增加分辨率，只需增加 DOM 元素的大小。

canvas.width and canvas.height设置画布的大小。canvas.style.width and canvas.style.height设置分辨率。

对于分辨率较低的显示器，请降低画布分辨率以适应屏幕分辨率。为设备提供额外的像素来渲染那些看不到的像素是没有意义的。当图像加载时，我亲自重新渲染所有图形以纠正较低分辨率显示的分辨率。同样，这是为了阻止设备渲染超出需要的像素（移动设备无法处理太多），并且平滑方法还有很多不足之处（即它是完全错误的）请观看此视频以解释原因电脑颜色坏了 https://youtu.be/LKnqECcg6Gw

小心降低分辨率。如果你有一张 100×100 像素的图像并且需要将其缩小到 93×93，那么它看起来不太好。仔细选择每个渲染元素的图形尺寸，以尽可能减少您将要显示的最常见的分辨率集。

还允许运动场尺寸有一些回旋余地，它们不必全部具有完全相同的尺寸。

更好的方法是将图形存储为基于矢量的图像（例如 SVG 或直接矢量渲染到画布的自定义格式），然后在加载时在设备上以正确的分辨率渲染图像。

这样你就剩下了这个方面。您对此无能为力，并且某些屏幕会比其他屏幕显示更多的游戏场地。您必须确定可以在宽度和高度上进行游戏的最小尺寸的游戏场地，并确保它不会低于该尺寸。

但尽管如此，大部分工作已经完成，您无法返回并重做所有工作，因此这里是简单的解决方案。

var nativeWidth = 1024;  // the resolution the games is designed to look best in
var nativeHeight = 768;

// the resolution of the device that is being used to play
var deviceWidth = window.innerWidth;  // please check for browser compatibility
var deviceHeight = window.innerHeight;

您有两个缩放选项。缩放以适合，或缩放以填充。

// A: This will ensure that the scale fills the device but will crop
// some of the top and bottom, or left and right of the play field.
// use the max scale.
var scaleFillNative = Math.max(deviceWidth / nativeWidth, deviceHeight / nativeHeight);

// B: this will ensure that all screens will see all of the native playscreen size
// but some displays will have extra playfield on the sides or top and bottom.
// use the min scale
var scaleFitNative = Math.min(deviceWidth / nativeWidth, deviceHeight / nativeHeight);

将画布分辨率和大小设置为

canvas.style.width = deviceWidth + "px";
canvas.style.height = deviceHeight + "px";
canvas.width = deviceWidth;
canvas.height = deviceHeight;

现在您需要设置渲染比例

// ctx is the canvas 2d context 
ctx.setTransform(
    scaleFitNative,0, // or use scaleFillNative 
    0,scaleFitNative,
    Math.floor(deviceWidth/2),
    Math.floor(deviceHeight/2)
);

这已将屏幕中心设置为原点。

UPDATE

我原来的答案有错误。

要获取本地资源左上角的偏移量，请执行以下操作：

var offSetToNativeTop = -nativeHeight/2; // incorrect
var offSetToNativeleft = -nativeWidth/2; // incorrect

应该...

var offSetToNativeTop = (-nativeHeight/2)*scaleFitNative; // correct
var offSetToNativeleft = (-nativeWidth/2)*scaleFitNative; // correct

or

var offSetToNativeTop = (-nativeHeight/2)*scaleFillNative; // correct
var offSetToNativeleft = (-nativeWidth/2)*scaleFillNative; // correct

对于由此造成的任何不便，我们深表歉意。

获取设备左上角的偏移量

var offsetDeviceTop = -(deviceHeight/scaleFitNative)/2;
var offsetDeviceLeft = -(deviceWidth/scaleFitNative)/2;

获取设备场地显示尺寸

var deviceDisplayWidth = deviceWidth/scaleFitNative;
var deviceDisplayHeight = deviceHeight/scaleFitNative;

不要忘记平滑。

if(scaleFitNative < 1){
    ctx.imageSmoothingEnabled = true; // turn it on for low res screens
}else{
    ctx.imageSmoothingEnabled = false; // turn it off for high res screens.
}

您还可以对单个渲染项目执行此操作，具体取决于其比例和您个人的偏好，即它们看起来如何平滑、缩小、平滑扩展或不平滑大小。

这应该为您提供为所有设备渲染图形所需的一切