javascript - 在浏览器调整大小时调整背景图像的大小

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 内容的大小，则会向 Canvas 元素添加更多像素。内容不会调整大小以适应。

canvas.width = window.innerWidth;

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

canvas.style.width = window.innerWith;

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

这是我为回答类似问题而制作的一个快速示例，它应该可以帮助您入门。

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