Question

我在画布上画了两张图片。

我想确保A显示在B上。

var Apic = new Image();
var Bpic = new Image();

Apic.src = "Apic.png";
Bpic.src = "Bpic.png";

// I want to add z-index to 

Apic.style  =  "z-index:1;";
Bpic.style  =  "z-index:2;";

Apic.onload = function() {
    context.drawImage(Apic 0,0);
};

Bpic.onload = function() {
    context.drawImage(Bpic,0,0);
};

然而，它没有用，任何好的解决方案??

我已经用Ken Fyrstenberg的帮助解决了这个问题。

Bpic每次都是在Apic上画的。

虽然它可能不是好方法，它现在可以解决问题。

Apic.onload = function() {
    context.drawImage(Apic 0,0);
    context.drawImage(Bpic,0,0);
};

Bpic.onload = function() {
    context.drawImage(Bpic,0,0);
};

Answer 1

只需将网址放入数组即可。以相同的顺序创建图像元素到并行数组。这将使订单保持紧张。然后，您需要计算成功的负载，以便我们确定我们拥有所需的所有图像数据：

var urls = ["Apic.png", "Bpic.png"];      // url and order
var pics = [];                            // holds the image elements                 
var count = urls.length;                  // number of images to load

for(var i = 0, url; url = urls[i++];) {   // share onload handler
    var pic = new Image();                // create a new image
    pics.push(pic);                       // store in array
    pic.onload = loadCounter;             // set load handler (also add for error)
    pic.src = url;                        // set url to start loading
}

function loadCounter() {
    count--;
    if (!count) {                         // when done we can draw the images in order:
        for(var i = 0, pic; pic = pics[i++];) {
            context.drawImage(pic, 0, 0);
        }
    }
};

如何确保画布上图像的加载顺序

1 个答案: