Question

所以我想操纵画布，但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>

和身体内的画布，一些div的孩子。

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

我没有看到它有什么问题。我有正确的所有文件，Firebug中没有错误。你能以某种方式帮助我吗？

编辑：我试图在Firebug中获取变量值，但未定义它们。

Answer 1

看起来他们使用div作为容器而不是画布。试试这个：

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

Answer 2

我必须将<canvas>更改为<div>，因为Kinetic JS使用div容器，我还必须将defer="defer"添加到我的脚本标记

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

2 个答案: