Question

好的，我现在尝试加载两个Kinetic图像，但它仍然不起作用。我也尝试将它放在另一层和另一个舞台上。什么都没有帮助。但是有了一张图片，一切都很好。

var stage = new Kinetic.Stage({
    container: 'container',
    width: 1600,
    height: 1000
});
var layer = new Kinetic.Layer();

var imageObj = new Image();
imageObj.onload = function() {
    var yoda = new Kinetic.Image({
        x: 200,
        y: 50,
        image: imageObj,
        width: 106,
        height: 118
    });

var imageObj2 = new Image();
imageObj2.onload = function() {
    var vader = new Kinetic.Image({
        x: 400,
        y: 200,
        image: imageObj2,
        width: 206,
        height: 218
    });

    // add the shape to the layer
    layer.add(yoda);
    layer.add(vader);

    // add the layer to the stage
    stage.add(layer);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';
imageObj2.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';

OLD：

这是http://www.html5canvastutorials.com/的示例代码。我想加载两个（或更多）图像并通过单击一个按钮为它们设置动画。一张图片一切正常，但这段代码让我很困惑。调用loadImages函数后，即使没有显示警报，也不会再有反应。在哪里以及如何放置我的动画功能？（我稍后会实现其他动画）感谢您的想法！

CSS

  body {
    margin: 0px;
    padding: 0px;
  }

  #buttons {
    position: absolute;
    top: 50px;
    left: 100px;
  }

  #buttons > input {
    padding: 10px;
    display: block;
    margin-top: 5px;
  }

HTML

<div id="container"></div>
<div id="buttons">
  <input type="button" id="start" value="Start">
  </div>
<canvas id="myCanvas" width="578" height="200"></canvas>

JS

  document.getElementById('start').addEventListener('click', function() {
    anim.start(); //button should start animation
    }, false);

  function loadImages(sources, callback) {
    var images = {};
    var loadedImages = 0;
    var numImages = 0;
    // get num of sources
    for(var src in sources) {
      numImages++;
    }
    for(var src in sources) {
      images[src] = new Image();
      images[src].onload = function() {
        if(++loadedImages >= numImages) {
          callback(images);
        }
      };
      images[src].src = sources[src];
    }
  }

  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  var sources = {
    darthVader: 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg',
    yoda: 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg'
  };

  loadImages(sources, function(images) {
    context.drawImage(images.darthVader, 100, 30, 200, 137);
    context.drawImage(images.yoda, 150, 55, 93, 104);
  });

  var angularSpeed = 360 / 4; //from this line on it's like the js-code doesn't exist
  var anim = new Kinetic.Animation(function(frame) { exist
      var angleDiff = frame.timeDiff * angularSpeed / 1000;
      images.yoda.rotate(angleDiff); //sources. instead images.?
  }, layer);

Answer 1

您正在将html5画布代码与KineticJS库代码混合。

您必须从每个图像对象创建Kinetic.Image对象。

只有这样你才能使用Kinetic.Animation将它们设置为旋转动画。

Javascript：预装图像后没有响应

1 个答案: