画布大小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; 
}