Kinetic JS无法使用外部脚本文件？

Question

So I want manipulate canvas, but Kinetic JS doesn't seem to work, don't know why.

This code is from a tutorial:

$(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);
});

this is in a tone.js file inside a js folder.

here is my html head:

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

and the canvas inside the body, the child of some divs.

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

I don't see what is wrong with it. I have all the files correctly where they should be, no errors in Firebug. Can you help me somehow?

EDIT: I tried to get the values of variables in Firebug, they are not defined.

Answer 1

it looks like they used a div as the container rather than a canvas. Try this:

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

Answer 2

我不得不将<canvas>更改为<div>因为Kinetic JS使用div容器，而且我还必须在我的脚本标签中添加defer="defer"