根据内容动态调整画布大小

Question

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

如果我将高度设置为例如。 800对于更长的列表来说很好，但对于只有少数几个元素的列表来说，它太高了，并且很多空白仍留在底部，再加上不必要的滚动（它被放置在div和overflow: auto之间，所以我可以在更长的图例出现）。

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

编辑：代码

<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

如果您已经将画布放在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); 
}