Question

我正在浏览HTML5 Canvas Kinteticjs tutorial以添加图片。我想添加多个图像并将它们分层下面的示例有两个图像，但两者都是相同的。

问题：如何加载2张不同的图像？

Answer 1

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

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

Answer 2

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

所以，只要你在Image和Kinetic.Image之间建立一对一的连接，你就可以了。

html5canvastutorials.com上的示例使用Image.onload函数创建Kinetic.Image。这让很多人感到困惑。但是，如果预加载图像，则无需执行此操作。

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

预先加载iamges，

您只需将图片添加到文档中并将其隐藏即可
或者，使用ajax调用调用图片网址。

使用Kineticjs在Canvas上添加多个图像

2 个答案: