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%，但这导致网格正方形变为模糊的矩形。

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

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

缩放全屏画布以适应窗口大小更改时的内容

1 个答案: