畫布大小HTML

Question

我想根據DIV的內容動態調整畫布大小。我正在使用下面的代碼，但它似乎並沒有工作。

<canvas id="canvas1" width="800" height="2000" > <canvas> 

的Javascript

document.getElementById("canvas1").style.height = document.getElementById("div").style.height; 
document.getElementById("canvas1").style.width= document.getElementById("div").style.width; 

而且我想，在畫布上時自動加載，我應該怎麼做呢？在$(document).ready事件？

我該怎麼做呢？

Answer 1

使用offsetWidth來獲取元素的尺寸（包括邊框）。

// loaded automatically on page load 
window.onload = function() { 
    var div = document.getElementById("div"); 
    var canvas = document.getElementById("canvas1"); 
    canvas.height = div.offsetHeight; 
    canvas.width = div.offsetWidth; 
}