根据内容

Question

我有一个画布，我在其中绘制内容。内容的宽度是恒定的，但高度会发生变化。这是一个列表 - 地图图例。问题是我不知道预先会得到多少物品，也不知道它们的大小。

如果我将身高设置为例如。 800它适用于较长的列表，但是对于只有少量元素的列表，它太高了，底部留下了很多空白，加上不必要的滚动（它放在div中{{1} }，所以我可以在出现更长的图例时滚动。

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

编辑：代码

overflow: auto

我使用以下方式设置<div class="legend"> some stuff here <div id="canvas"> <canvas id="cv"></canvas> </div> </div> #canvas { width: 100%; max-height: 100%; } 身高：

#canvas

知道总高度后。

Answer 1

如果您已经将div中的画布保持为溢出，则可以根据列表长度调整div高度。它可以更容易（并且在资源上更便宜）来模糊你不需要的部分，而不是再次画出画布。根据您的使用情况，画布甚至可能完全没有必要（仅仅预先渲染一些关键方面，即使用图像可能更有效），但如果没有其他细节我就不能再说了。

Answer 2

无法调整画布大小而无法清除其所有内容。

作为一种解决方法，我可以建议创建第二个画布，以便在调整大小时保留主要内容。

const mainCanvas = ...;
const mainCtx = mainCanvas.getContext('2d');

const hiddenCanvas = document.createElement('canvas');
const hiddenCtx = hiddenCanvas.getContext('2d');

function render() {
    // render the list and keep last Y position

    // copy content of main canvas to the 2nd one
    hiddenCanvas.width  = mainCanvas.width;
    hiddenCanvas.height = mainCanvas.height;
    hiddenCtx.drawImage(mainCanvas, 0, 0);

    // resize main canvas and restore its content
    mainCanvas.height = lastYPosition;
    mainCtx.drawImage(hiddenCanvas, 0, 0);
}

修改

正如评论中所指出的：您甚至可以将列表直接呈现给第二个画布。

const mainCanvas = ...;
const mainCtx = mainCanvas.getContext('2d');

const hiddenCanvas = document.createElement('canvas');
const hiddenCtx = hiddenCanvas.getContext('2d');

function render() {
    // render the list on hidden canvas
    // and keep last Y position

    // resize and copy
    mainCanvas.width = hiddenCanvas.width;
    mainCanvas.height = lastYPosition;
    mainCtx.drawImage(hiddenCanvas, 0, 0);
}