画布高度由 EaselJS 更改。如何避免这种情况？

Posted 2023-03-05

【中文标题】画布高度由 EaselJS 更改。如何避免这种情况？

【英文标题】：Canvas height changed by EaselJS. How to avoid this?

【发布时间】：2016-05-14 01:44:02

【问题描述】：

我正在使用 Easel JS 开发基于 Canvas 的纸牌游戏。

TODO：为画布设置高度并在其中绘制所有元素。

问题： EaselJS 自动改变画布高度。

参考资料：

我如何设置高度：

      var gameBoard = document.getElementById("board");

  gameBoard.style.height = window.innerHeight+"px";
  gameBoard.height = gameBoard.offsetHeight;
  gameBoard.style.height = "auto";

【参考方案1】：

在不知道您的目标是什么的情况下，很难说出问题到底出在哪里……但是将 CSS“canvas.style.height”属性设置为“auto”似乎是个问题。宽度和高度属性（不是 CSS）仍然是您最初设置的值（1300 x 501）。

删除此行，您将得到一个画布，该画布与加载页面时的窗口大小相同。

gameBoard.style.height = "auto";

如果您希望画布具有与窗口中一样多的像素，则需要侦听“resize”事件并将值应用回画布。

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

【讨论】：

除此之外，请注意 EaselJS 从不设置画布的大小，一个例外是当您从 Flash/Animate CC 导出时——生成的 html 具有 FLA 舞台大小。如果您了解它会做什么，我只会建议使用 CSS 进行缩放，因为它会缩放像素，而不是更改尺寸。 @inverse' 建议直接在画布上设置宽度/高度更可取。