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

Question

我是Javascript，HTML和CSS的新手。我通过this code阅读了一个矩阵动画​​（它不是我的）。

动画位于HTML中的画布中：

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

动画使用窗口的边缘来确定何时重置“drop”：

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

我希望动画代替检测我将放在画布上的div的边缘，如下所示：

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