1

私は単純な何かを見逃している必要があります。私はかなり行ごとに行ってきましたが、それはうまくいかないようです。画像を読み込めません。

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/

4

1 に答える 1

1

ステージを適切に定義していないようです..上記のコードを試したところ、コンテナが定義されていないというエラーが表示されました..代わりにこれを試してください..

var stage = new Kinetic.Stage({
  container: "imgarea",
  width: 250,
  height: 256
});
于 2012-07-16T20:47:08.237 に答える