根據內容動態調整畫布大小

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); 
}