javascript - 如何在 flex 容器中调整固定大小( Canvas )的元素？

Question

HTML canvas 元素可以通过 HTML 页面的动态自动调整大小:可能是因为它的样式属性设置为百分比值，或者可能是因为它位于 flex 容器内。因此 Canvas 的内容也会调整大小:由于插值， Canvas 内容看起来模糊(分辨率损失)。

为了保持最大分辨率，必须根据元素的当前像素大小渲染 Canvas 内容。

这个 fiddle 展示了如何借助函数 getComputedStyle 完成此操作:https://jsfiddle.net/fx98gmu2/1/

setInterval(function() {
  var computed = getComputedStyle(canvas);
  var w = parseInt(computed.getPropertyValue("width"), 10);
  var h = parseInt(computed.getPropertyValue("height"), 10);

  canvas.width = w;
  canvas.height = h;

  // re-rendering of canvas content...
}, 2000); // intentionally long to see the effect

使用 setTimeout 函数，我将 Canvas 的宽度和高度更新为这些属性的计算值。

如 fiddle 所示，这仅在增加窗口大小时有效。每当窗口大小减小时， Canvas (flexbox 的元素)保持固定。

Answer 1

将它的 flex-basis 设置为 0，允许它用 flex-shrink 收缩，并且不强制任何最小宽度:

#canvas {
  flex: 1 1 0;
  min-width: 0;
}

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");
setInterval(function() {
  var computed = getComputedStyle(canvas),
      w = parseInt(computed.width, 10),
      h = parseInt(computed.height, 10);
  canvas.width = w;
  canvas.height = h;
  ctx.clearRect(0, 0, w, h);
  ctx.beginPath();
  ctx.arc(w/2, h/2, h/2, 0, Math.PI*2, true);
  ctx.stroke();
}, 2000); // intentionally long to see the effect

#container {
  border: 1px solid blue;
  width: 100%;
  display: flex;  
}
#canvas {
  border: 1px solid red;
  flex: 1 1 0;
  min-width: 0;
  height: 150px;
}

<div id="container">
  <canvas id="canvas"></canvas>
  <div>something else...</div>
</div>