javascript - 像处理 JS 窗口对象一样处理 div 的边缘

Question

我是 Javascript、HTML 和 CSS 新手。我通读了this code用于矩阵动画(不是我的)。

动画位于 HTML 的 Canvas 内:

<canvas id="c"></canvas>

动画使用窗口的边缘来确定何时重置“水滴”:

c.height = window.innerHeight;
c.width = window.innerWidth;

我希望动画改为检测 div 的边缘，我将把它放在 Canvas 上，如下所示:

 <div>
<canvas id="c"></canvas>
</div>

我的问题是:如何将 window.innerHeight 更改为表示 div 的对象，以便我可以通过简单地更改尺寸来调整动画大小div 的？

Answer 1

给DIV一个ID，例如<div id='container'>那么你可以这样做

c.height = document.getElementById('container').offsetHeight;
c.width = document.getElementById('container').offsetWidth;

演示:http://jsfiddle.net/E3X78/1/