Javascript 如何在flex容器中调整固定大小（画布）的元素的大小？

HTML画布元素可以通过HTML页面的动态自动调整大小：可能是因为它的样式属性设置为百分比值，也可能是因为它位于flex容器中。 因此，画布的内容也会调整大小：由于插值，画布内容看起来模糊（分辨率降低）

为了保持最大分辨率，必须基于元素的当前像素大小渲染画布内容

此提琴显示了如何在函数getComputedStyle的帮助下完成此操作：

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

---

如提琴所示，这仅在增大窗口大小时有效。每当窗口大小减小时，画布（flexbox的项目）将保持固定。

您需要将画布放入带有溢出：隐藏的容器中，并将画布尺寸设置为该容器的尺寸：

window.setTimeout（函数（）{
var div=$（“div”）；
div.find（“canvas”）.attr（{width:div.width（），height:div.height（）}）；
})

canvas{background:gold；display:block；}
div{宽度：50%；高度：50%；边框：1px实心；溢出：隐藏；}

---

将其

弹性基准

设置为0，允许其使用

弹性收缩

进行收缩，并且不强制任何最小宽度：

#画布{
弹性：110；
最小宽度：0；
}

var canvas=document.getElementById（“canvas”），
ctx=canvas.getContext（“2d”）；
setInterval（函数（）{
var computed=getComputedStyle（画布），
w=parseInt（计算宽度，10），
h=parseInt（计算高度，10）；
画布宽度=w；
canvas.height=h；
ctx.clearRect（0，0，w，h）；
ctx.beginPath（）；
弧（w/2，h/2，h/2，0，数学PI*2，真）；
ctx.stroke（）；
}, 2000); // 故意渴望看到效果

#容器{
边框：1px纯蓝色；
宽度：100%；
显示器：flex；
}
#帆布{
边框：1px纯红；
弹性：110；
最小宽度：0；
高度：150像素；
}

还有别的。。。

@AntonHarald您可能使用的是一个旧的Chrome版本，它还不支持新的

minwidth:auto

默认值。如果没有

最小宽度：0

，当您缩小窗口时，画布不会收缩。请注意，此解决方案仍然显示扭曲的画布-您将圆视为椭圆。短时间内，但仍然。@c-smile可用于防止变形。object-fit甚至不在批准的规格范围内。然而：@c-smile

对象匹配

是在候选推荐规范中定义的，因此它比Flexbox更稳定，Flexbox只是一个工作草案。无论如何，没有神奇的方法来调整画布的大小并获得完美的图像，你必须重新绘制它，这就是OP正在做的。问题是画布没有正确弯曲，变形完全不相关。这对我帮助很大，因为在我的案例中，库正在调整画布的大小，使其大于flexbox容器元素，并导致容器在我重新设置画布大小之前过大。添加溢出修复了这个问题。谢谢

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