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