在浏览器调整大小时调整背景图片的大小

Question

我正在使用EaselJs构建游戏，我想捕捉浏览器的onresize事件，以便调整舞台及其包含的所有图像的大小。

我已经试过这段代码：

window.addEventListener('resize', resize, false);

init() {
   createjs.Ticker.addEventListener('tick', handleTick);
   resize();
}

function handleTick(event) {
  stage.update();
}

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

但这并没有真正起作用...有什么想法吗？

谢谢。

Answer 1

如果使用JavaScript调整画布内容的大小，则将向画布元素添加更多像素。 内容将无法调整大小以适合。

canvas.width = window.innerWidth;

如果使用CSS调整大小，则您正在变换元素，因此它具有相同数量的像素，但是会被拉伸。

canvas.style.width = window.innerWith;

如果要缩放内容以适合更多像素，则需要缩放舞台，或者更好的方法是将内容放入容器中并进行缩放。

这是我为回答类似问题而制作的快速样本，应该可以帮助您入门。

https://jsfiddle.net/lannymcnie/4yy08pax/

Answer 2

据我所知，如果使用相对单位（例如100％）设置其宽度，则画布应自动保持其比例。 显然，子元素也应该相对，以实现流畅的布局。

如果要使用javascript获得相同的结果，则应使用正确的事件侦听器

window.onresize