Javascript：预加载图像后没有响应答案

【问题标题】：Javascript: No response after preload of imagesJavascript：预加载图像后没有响应
【发布时间】：2014-02-04 23:18:44
【问题描述】：

好的，我现在尝试加载两张 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';

旧：

这是来自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>

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

【问题讨论】：

标签： javascript image animation kineticjs preload

【解决方案1】：

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

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

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

【讨论】：