如何使网页游戏适应窗口

Question

我有一个网络游戏，我正在这样做以使游戏适合窗口：

 body {
    margin: 0;
}
 canvas {
    width: 100%;
    height: 100%;
}

现在，当我缩放浏览器窗口时，它只会拉伸游戏。

这是完整尺寸的浏览器：

这是我缩放浏览器窗口时发生的事情：

我的问题：当我缩放浏览器窗口时，我不想拉伸游戏，而是希望它放大。

这是我缩放浏览器窗口时要发生的事情：

Answer 1

我想您需要保持宽高比。

为此，您仍然必须声明宽度和高度为100％，但还要声明顶部填充，例如比例为16：9，如下所示：

.container {
    width: 100%;
    height: 100%;
    background-color: red;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

来源：https://www.w3schools.com/howto/howto_css_aspect_ratio.asp

看到它在这里工作：https://jsbin.com/gajumuq/edit?html,css,output

Answer 2

您可以尝试使用CSS单位vh和vw进行试验，它们基于浏览器的高度或宽度来设置大小。例如：

 body {
    margin: 0;
}
 div {
    width: 100vh;
    height: 50vh;
    background-color: red;
}

<div></div>

在此示例中，当您将浏览器垂直缩小时，它会按比例缩放。 （在此示例中，无法在浏览器中调整大小，因为这是一个iframe，但您可以自己尝试一下，以查看它是否有效。）

下面是一个示例，您可以在其中查看它的作用：

https://jsbin.com/rununuxara/edit?html,css,output

Answer 3

根据您的评论和示例结果图像，听起来您想让<canvas>游戏元素填充整个屏幕，并且没有负载裕量。当用户调整窗口大小时，听起来您想保持元素尺寸不变，而不是拉伸或缩放画布。下面的代码创建一个画布，在其上（或多或少）将您的图案绘制到窗口比例上（或多或少），并保持这些比例，而不考虑可能发生的任何调整大小：

"use strict";

const canvas = document.createElement("canvas");
document.body.appendChild(canvas);
const ctx = canvas.getContext("2d");

/* 
 * These width and height values are set once on load, 
 * then remain fixed and will not change after window resizing 
 */
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

ctx.fillStyle = "#744";
ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = "#700";
ctx.beginPath();
ctx.arc(
  canvas.width / 2, 
  canvas.height / 2, 
  canvas.width / 30, 
  0, Math.PI * 2
);
ctx.fill();

ctx.strokeStyle = "#711";
ctx.lineWidth = 10;
ctx.strokeRect(
  canvas.width / 6, 
  canvas.height / 6, 
  canvas.width / 1.5, 
  canvas.height / 1.5
);

ctx.strokeStyle = "#711";
ctx.lineWidth = 10;
ctx.strokeRect(
  canvas.width / 3, 
  canvas.height / 3, 
  canvas.width / 3, 
  canvas.height / 3
);

html, body {
  height: 100%;
}

body {
  margin: 0;
}

请参见JSFiddle。请注意，您可能需要从JSFiddle和上面的代码段复制此代码，以查看它在正常的浏览器窗口中没有滚动条的情况下是否可以正常工作。

作为参考，如果希望在调整大小或保持固定的宽高比时调整图像以适合视口，请查看debouncing。实施任何动态调整大小（甚至在页面加载后一次计算所有尺寸）的困难在于，您还需要使游戏数据具有响应性/可伸缩性，并且拉伸效果可能是不良的（例如，如果用户的原始外观）比率是很奇怪的，您的游戏会显得很拉伸且无法播放。

让我知道这是否不是您要查找的内容，我会进行调整；希望它能为您提供一些帮助。

Answer 4

如果您希望画布完全覆盖窗口，但同时保持宽高比，则可以执行此操作。

我建议您也阅读this article。

var canvas = document.getElementById("mycanvas");

var aspectRatio = 16/9; //ratio as you want, for example 16:9

function refreshCanvas() {//refresh size canvas function
  if (window.innerWidth/window.innerHeight >= aspectRatio) {
    canvas.style.width = window.innerWidth+'px';
    canvas.style.height = (window.innerWidth/aspectRatio)+'px';
  } else if (window.innerWidth/window.innerHeight < aspectRatio) {
    canvas.style.width = (window.innerHeight*aspectRatio)+'px';
    canvas.style.height = window.innerHeight+'px';
  }
  canvas.style.left = (window.innerWidth/2-canvas.offsetWidth/2)+'px';
  canvas.style.top = (window.innerHeight/2-canvas.offsetHeight/2)+'px';
}

window.addEventListener('resize', refreshCanvas); //refresh when resize window
window.addEventListener('load', refreshCanvas); //refresh when load window

body {
  margin: 0px;
}
#mycanvas {
  position: fixed;
  background-image: url('https://gmer.io/resource/community/backgroundCanvas.png');
}

<canvas id="mycanvas"></canvas>