javascript - 随着窗口大小的改变，缩放全屏画布以适应内容

Question

基本上，我有一个绘制网格的画布。当窗口改变大小时，它会刷新网格和场景以用网格填充整个屏幕。

当我将浏览器窗口调整为更小的尺寸时，我希望网格和画布内的所有内容都随之缩小，同时保持网格框为方形。像Agar.io这样的网站在他们的画布上使用了这个。

var canvas = document.getElementById("mainCanvas");
var ctx = canvas.getContext("2d");

function resize() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}


function createMap() {
  var gridOptions = {
    majorLines: {
      separation: 30,
      color: '#e8e8e8'
    }
  };
  drawGridLines(canvas, gridOptions.majorLines);
  return;
}

function drawGridLines(canvas, lineOptions) {
  var iWidth = canvas.width;
  var iHeight = canvas.height;
  ctx.strokeStyle = lineOptions.color;
  ctx.strokeWidth = 1;
  ctx.beginPath();
  var iCount = null;
  var i = null;
  var x = null;
  var y = null;
  iCount = Math.floor(iWidth / lineOptions.separation);
  for (i = 1; i <= iCount; i++) {
    x = (i * lineOptions.separation);
    ctx.moveTo(x, 0);
    ctx.lineTo(x, iHeight);
    ctx.stroke();
  }
  iCount = Math.floor(iHeight / lineOptions.separation);
  for (i = 1; i <= iCount; i++) {
    y = (i * lineOptions.separation);
    ctx.moveTo(0, y);
    ctx.lineTo(iWidth, y);
    ctx.stroke();
  }

  ctx.closePath();
  return;
}

function refresh() {
  resize();
  createMap();
}
window.onresize = function() {
  refresh();
}
refresh();

body,
html {
  align-content: center;
  overflow: hidden;
  border: 0;
  margin: 0;
  padding: 0;
}

#mainCanvas {
  top: 0;
  left: 0;
  position: absolute;
  overflow: hidden;
  border: 0;
  margin: 0;
  padding: 0;
}

<canvas id="mainCanvas"></canvas>

换句话说，画布的视图就像鸟瞰图，如果从屏幕中心到左侧有 10 个网格框。当窗口完全放大时，屏幕将保持从中心到左侧的相同数字或网格框，就像将浏览器窗口调整为较小状态时一样。（当然，根据屏幕比例，大概有10个格子框左右，但大致就在这个范围内）

我尝试使用 CSS 将画布大小设置为100%宽度和高度，但这会导致网格正方形变成模糊的矩形。

我可以添加什么来使画布中的元素随着窗口大小而缩小和增长？

标签： javascripthtmlcanvas

Answer 1

这是一个示例，其中画布中的元素随着窗口大小而缩小和增长：

<style>body{margin:0}</style>
<canvas id="mainCanvas"></canvas>


<script>
var canvas = document.getElementById("mainCanvas");
var ctx = canvas.getContext("2d");

function resize() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    var gridOptions = {
        majorLines: {
        separation: 20,
        color: '#e8e8e8'
        }
    };
    drawGridLines(canvas, gridOptions.majorLines);
}

function drawGridLines(canvas, lineOptions) {
    ctx.strokeStyle = lineOptions.color;
    ctx.strokeWidth = 1;
    ctx.beginPath();

    var size = Math.floor(canvas.width / lineOptions.separation);
    for (var i = 1; i <= lineOptions.separation; i++) {
        var x = (i * size);
        ctx.moveTo(x, 0);
        ctx.lineTo(x, canvas.height);
        ctx.stroke();
    }
    for (var i = 1; i <= Math.floor(canvas.height / size); i++) {
        var y = (i * size);
        ctx.moveTo(0, y);
        ctx.lineTo(canvas.width, y);
        ctx.stroke();
    }
    ctx.closePath();
}

window.onresize = function() { resize(); }
resize();
</script>

这是一个现场样本：

https://raw.githack.com/heldersepu/hs-scripts/master/HTML/canvasResize2.html