Question

如何在调整窗口大小时始终将画布保持在 this demo 中心（包括滚动条出现时）？ canvas元素应该始终填充窗口。

我尝试使用left，margin-left等设置（包括负值），但无济于事。

Answer 1

这是你想要的吗？

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

这是demo。

UPDATE 1 我已经重构了注释，以显示在何处更改代码以将画布调整为窗口高度和宽度之间的最大尺寸。

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

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

在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;
}

Answer 2

你试过overflow: hidden;吗？

<强> JSFiddle

body {
  overflow: hidden;
}

Answer 3

你可以做点什么帆布{ 位置：固定; 上：-500px; }

Answer 4

要使画布随页面调整大小，请尝试添加窗口调整大小侦听器：

window.addEventListener("resize", function () {
    canvas.width = window.innerWidth;
    canvas.width = window.innerHeight;
});

如果要删除边距以使画布填满整个页面，请尝试将以下CSS添加到页面中：

body {    
    margin: 0 !important;
    padding: 0 !important;
}

Answer 5

经过多次摆弄，我想我已经明白了。这是working demo（fullscreen version）。我最终使用了以下循环：

function render() {
    requestAnimationFrame(render);
    window.scrollTo(
        document.documentElement.scrollWidth/2 - window.innerWidth/2, 
        document.documentElement.scrollHeight/2 - window.innerHeight/2
    );
}
requestAnimationFrame(render);

自动将窗口滚动到整个可滚动区域的中间（包括不可见部分），减去观看区域本身大小的一半。

感谢大家的帮助！

如何保持以窗口为中心的元素？

5 个答案: