javascript - Canvas 大小 HTML

Question

我想根据 DIV 的内容动态调整 Canvas 大小。我正在使用以下代码，但它似乎不起作用。

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

我还希望自动加载 Canvas ，我应该怎么做？在 $(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;
}