javascript - 如何使填充窗口的元素保持居中？

Question

如何将 Canvas 保留在 this demo 中 调整窗口大小时始终居中(包括出现滚动条时)？ Canvas 元素应始终填满窗口。

我尝试使用 left、margin-left 等设置(包括负值)但无济于事。

Answer 1

这是你想要的吗？

这是代码的重构版本，可在调整窗口大小时将 Canvas 调整为窗口的最小尺寸(宽度或高度)。它还将 Canvas 的 display 设置为 block 并使用 margin: 0 auto 使其居中。

这是 demo .

更新 1 我用注释进行了重构，以显示更改代码的位置，以将 Canvas 大小调整为窗口高度和宽度之间的最大尺寸。

更新 2 我已经重构以适合 Canvas ，因此通过将宽度和高度设置为精确的窗口，十字准线始终居中。

我还更新了 CSS 以删除所有填充和边距。

Canvas 在 window.onresize 上重绘。

var canvas = document.createElement('canvas');
document.body.appendChild(canvas);

function setSize() {
  var w = window.innerWidth;
  var h = window.innerHeight;
  //var size = (h > w) ? h : w;   //<<<< resize to largest between height and width
  //var size = (h < w) ? h : w; //<<<< resize to smallest between height and width
  //canvas.width = size;
  //canvas.height = size;
  canvas.width = w; 	//<<<< exact resizing to width
  canvas.height = h; 	//<<<< exact resizing to height
}

function draw() {
  var context = canvas.getContext('2d');
  context.fillRect(0, 0, canvas.width, canvas.height);
  context.strokeStyle = 'red';
  context.moveTo(canvas.width/2, 0);
  context.lineTo(canvas.width/2, canvas.height);
  context.moveTo(0, canvas.height/2);
  context.lineTo(canvas.width, canvas.height/2);
  context.stroke();
}

setSize();
draw();

window.onresize = function(e) {
  setSize();
  draw();
};

* {
  padding: 0;
  margin: 0;
}

canvas {
  display: block;
  margin: 0 auto;
}