自动更新 HTML 画布的宽度和高度属性

Question

我想将 HTML5 画布与 flexbox 一起使用。当用户调整窗口大小时，我需要自动设置 canvas.width 和 canvas.height。我已经尝试使用 jQuery：

$(".cnvs").attr("width", $(".cnvs").width());
$(".cnvs").attr("height", $(".cnvs").height());

但它会不断增加画布的实际宽度，因此它几乎填满了整个屏幕。我已经输入了it on jsfiddle - 尝试使用分隔符调整输出窗口的大小。

有什么合理的方法吗？谢谢。

编辑：明确一点：我不想用该画布填满整个屏幕。我想要 UI：

<div class="container">
   <div class="control"></div>
   <canvas></canvas>
   <div class="control"></div>
</div>

然后使用 flexbox 将这三个元素并排放置，而 canvas 将是另一个元素的两倍宽。这没有问题，但 canvas.width 和 canvas.height 没有得到更新，所以每当我在画布上渲染一些东西时，它都会被渲染为画布是 320x140 像素。

编辑2：很抱歉，但是（可能是因为我的英语不好）我不够清楚。我会再解释一遍：

只有使用 flexbox，canvas 元素的实际宽度才是正确的（即使不使用任何 JavaScript 代码）。我的问题是，虽然宽度是正确的（并且$(".cnvs").width() 返回正确的宽度值），但它没有任何“宽度”属性，它仍然是：

<canvas>
</canvas>

而且我需要自己提供宽度参数（因为它在未设置时渲染很糟糕）。当我尝试使用我的代码或建议时：

...
var rect = canvas.parentNode.getBoundingClientRect();
canvas.width = rect.width;
canvas.height = rect.height;
...

它的行为很奇怪，画布的宽度随着每次调整大小而不断增加，但太多了（它几乎立即删除了两个控制 div）。

Answer 1

更新 2

如果我对问题的理解正确：画布有一个 flex CSS 集（目前未在问题中显示）。它将画布定义为其他两个元素大小的 2 倍，但由于画布是调整大小而不是它的位图，所以绘图也是拉伸的，您希望位图动态采用。

如果是这样，请对代码进行此更改 -

此更新将单独保留画布 元素 的 CSS 规则，让 flexbox 处理它。它将读取元素的实际像素大小，然后将其应用于位图，这样数据就不会被拉伸：

$(window).on("resize", function() {
  var cnvs = $(".cnvs")[0];                  // cache canvas element
  var rect = cnvs.getBoundingClientRect();   // actual size of canvas el. itself

  cnvs.width = rect.width;
  cnvs.height = rect.height;
  // ... redraw content here ...
}

此外，由于调整窗口大小会产生很多事件，您可能需要考虑“去抖动”，以便只处理最近的调整大小：

var timerID;
$(window).on("resize", function() {
  clearTimeout(timerID);
  timerID = setTimeout(function() {
    var cnvs = $(".cnvs")[0];                  // cache canvas element
    var rect = cnvs.getBoundingClientRect();   // actual size of canvas el. itself

    cnvs.width = rect.width;
    cnvs.height = rect.height;
    // ... redraw content here ...
  }, 180);  // adjust at will
}

这会将调整大小/重绘延迟到 180 毫秒。

Answer 2

你甚至不用加载 jQuery，很简单：

var canvas = document.querySelector("canvas");

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

Answer 3

您必须为窗口对象的调整大小事件添加一个侦听器。 如果您正在寻找 jquery 解决方案。

$( window ).resize(function() {
   $(".cnvs").attr("width", $(window).width());
   $(".cnvs").attr("height", $(window).height());
});

这应该可以正常工作。