javascript - Kinetic JS 无法从外部脚本文件运行？

Question

所以我想操作canvas，但是Kinetic JS似乎不起作用，不知道为什么。

此代码来自教程:

$(function(){
      var stage = new Kinetic.Stage({
        container: 'gridalea',
        width: 172,
        height: 720
      });

      var layer = new Kinetic.Layer();

      var rect = new Kinetic.Rect({
        x: 239,
        y: 75,
        width: 100,
        height: 50,
        fill: 'green',
        stroke: 'black',
        strokeWidth: 4
      });

      // add the shape to the layer
      layer.add(rect);

      // add the layer to the stage
      stage.add(layer);
});

它位于 js 文件夹内的tone.js 文件中。

这是我的 html 头:

<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.transit.min.js"></script>
<script src="js/kinetic-v4.7.4.min.js"></script>
<script src="js/tone.js"></script>

以及主体内的 Canvas ，一些 div 的子元素。

<canvas id="gridalea" width="175px" height="720px">Your browser does not support canvas.</canvas>

我不明白这有什么问题。我将所有文件正确放置在应有的位置，Firebug 中没有错误。你能帮我一下吗？

编辑:我尝试获取 Firebug 中变量的值，但它们未定义。

Answer 1

看起来他们使用了 div 作为容器而不是 Canvas 。试试这个:

<div id="gridalea" width="175px" height="720px"></div>