javascript - 根据内容动态调整 Canvas 大小

Question

我有一个 Canvas ，我可以在其中绘制内容。内容的宽度不变，但高度会发生变化。这是一种列表 - map 图例。问题是我不知道我会事先得到多少元素，也不知道它们的尺寸。

如果我将高度设置为例如。 800 对于较长的列表来说没问题，但对于只有几个元素的列表来说，它太高了，底部有很多空白，加上不必要的滚动(它放在 div 中， overflow: auto，所以当出现更长的图例时我可以滚动)。

但我知道我绘制每个元素之后的最后一个像素 Y 位置。是否可以以某种方式 trim 剩余空间或强制调整 Canvas 大小？

编辑:代码

<div class="legend">

    some stuff here

    <div id="canvas">
        <canvas id="cv"></canvas>
    </div>
</div>


#canvas {
    width: 100%;
    max-height: 100%;
}

然后我使用以下方法设置#canvas 高度:

document.getElementById('canvas').style.height = finalSize

在知道总高度之后。

Answer 1

如果您已经将 Canvas 放在 div 中以便溢出，您可以根据列表长度调整 div 高度。隐藏不需要的部分比重新绘制 Canvas 更容易(并且资源更便宜)。根据您的用例， Canvas 甚至可能完全没有必要(仅预渲染几个关键方面可能更有效，即使用图像)，但如果没有其他详细信息，我不能再多说了。