Html 使用Kineticjs在画布上添加多个图像

我正在通过HTML5画布Kinteticjs添加图像。我想添加多个图像并将其分层。
下面的示例有两个图像，但都是相同的

---

问题：如何加载两个不同的图像？

您必须创建两个图像对象，而不是一个，在加载两个图像时，您可以将两个图像都放在画布上

var imgObj1 = new Image();
var imgObj2 = new Image();
var loadCount = 0;

imgObj1.onload = function() {
   loadCount++;
   if(loadCount==2) putOnCanvas();
};

imgObj2.onload = function() {
   loadCount++;
   if(loadCount==2) putOnCanvas();
};

imgObj1.src = ".....";
imgObj2.src = ".....";

function putOnCanvas() {
    var yoda = new Kinetic.Image({
      x: 140,
      y: stage.getHeight() / 2 - 59,
      image: imageObj1,
      width: 106,
      height: 118
    });

    var filteredYoda = new Kinetic.Image({
      x: 320,
      y: stage.getHeight() / 2 - 59,
      image: imageObj2,
      width: 106,
      height: 118
    });

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

    // add the layer to the stage
    stage.add(layer);

    // apply grayscale filter to second image
    filteredYoda.applyFilter(Kinetic.Filters.Grayscale, null, function() {
      layer.draw();
    });
}

---

您可能已经知道，Image不是KineticJS对象，而是Kinetic.Image

所以，只要你在图像和动能图像之间建立一对一的联系，你就可以接受它

html5canvastutorials.com上的示例使用Image.onload函数创建Kinetic.Image。这让很多人感到困惑。但是，如果预加载图像，则不需要这样做

加载图像时创建Kinetic.Image的目的是使画布上没有无效（损坏）的图像。因此，如果通过预加载使所有图像都有效，则不需要使用image.onload，这会让您感到困惑

要预加载iamges

您只需将图像添加到文档并将其隐藏即可

或者，使用ajax调用调用图像url

---

难道没有更雄辩的方式吗？假设你想要创建一个游戏，并且必须加载所有图像。这样的话，我将只为onload函数生成数百行。您可以对每个图像对象执行类似“imageObj.onload=function（）{stage.batchDraw（）；}”的操作，但这将渲染空图像，直到它们完全加载为止。最好的解决方案是将它们全部预加载，或者制作某种包装器来处理事情。如果这是一个游戏，你不会一直在重新加载图像——那太慢了。