Question

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

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

这个小提琴展示了如何在函数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函数，我将画布的宽度和高度更新为这些属性的计算值。

正如小提示所示，这仅在增加窗口大小时起作用。每当窗口大小减小时，画布（flexbox的项目）保持固定。

Answer 1

将其flex-basis设置为0，允许其缩小flex-shrink，并且不要强制任何最小宽度：

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您需要将画布放入一个overflow:hidden的容器中，并将画布尺寸设置为该容器的尺寸：

＆＃13;

window.setTimeout( function() {
  var div = $("div");
  div.find("canvas").attr( { width:div.width(), height:div.height()} );
})

＆＃13;

canvas { background:gold; display:block; }

div { width:50%; height:50%; border:1px solid; overflow:hidden; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <canvas width="200" height="100" /> 
</div>

＆＃13;

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

2 个答案: