Question

我想在Flexbox中使用HTML5画布。我需要在用户调整窗口大小时自动设置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()返回正确的宽度值），但它没有任何＆＃34;宽度＆＃34;属性，它仍然是：

<canvas>
</canvas>

我需要自己提供宽度参数（因为它没有设置时会呈现严重的错误）。当我尝试使用我的代码或建议：

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

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

Answer 1

更新2

如果我理解问题是正确的：画布有一个flex CSS设置（现在问题中没有显示）。它将画布定义为其他两个元素大小的2倍，但由于画布已调整大小而不是其位图，因此图形也是拉伸，您希望动态采用位图。

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

此更新将单独保留canvas 元素的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
}

这将延迟调整大小/重绘，直到180ms过去。

Answer 2

你甚至不需要加载jQuery，这很简单：

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

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

Answer 3

您必须在窗口对象上的resize事件中添加一个侦听器。如果你正在寻找一个jquery解决方案。

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

这应该可以正常工作。

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

3 个答案: