Масштабировать полноэкранный холст, чтобы он соответствовал содержимому, поскольку размер изменений окна

В принципе, у меня есть холст, который рисует сетку. Когда окно изменяет размеры, оно обновляет сетку и сцену, чтобы заполнить весь экран сеткой.

Когда я изменяю размер окна моего браузера на меньший размер, я бы хотел, чтобы сетка и все внутри холста сжались вместе с ней, сохраняя квадраты квадратов квадратами. Такие сайты, как 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%на ширину и высоту, но это привело к тому, что квадраты сетки стали размытыми прямоугольниками.

Что я могу добавить, чтобы заставить элементы в холсте уменьшаться и увеличиваться с размером окна?

javascript,html5,canvas,

0

Ответов: 1


0 принят

Вот пример, где элементы в холсте сжимаются и растут с размером окон:

<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

JavaScript, html5, холст,
Похожие вопросы