Kinetic.js 无法将图像加载到画布上

Question

我必须遗漏一些简单的东西。我已经逐行进行了相当多的操作，但它似乎不起作用。我无法加载图片。

var imageToCanvas = function(){
  var stage = new Kinetic.Stage("imgarea", 250, 256);

  var layer = new Kinetic.Layer();

  var imageobj = new Image();
  imageobj.onload = function(){
    var img = new Kinetic.Image({
      x: 10,
      y: 10,
      image: imageobj,
    });
    layer.add(img);
    stage.add(layer);
  };
  imageobj.src = "/static/img/unit-test-image.png";
  console.log(imageobj);
};

$(document).ready( function(){
  imageToCanvas();
});

    <canvas id="imgarea" width="250px" height="256px"></canvas>

相同的代码似乎可以在我使用 Kinetc.js 的另一个画布应用程序中工作。我似乎无法弄清楚为什么这个不起作用。

代码看起来也与教程非常相似：http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-image-tutorial/

Answer 1

看起来你没有正确定义阶段。当我尝试上面的代码时，我收到一个关于容器未定义的错误。试试这个吧..

var stage = new Kinetic.Stage({
  container: "imgarea",
  width: 250,
  height: 256
});