Canvas ctx.drawImage 不适用于透明 PNG

Question

ctx.drawImage() 在我使用透明 PNG 时不起作用，但在我使用常规 PNG 时起作用。

 var context = document.getElementById("canvas").getContext('2d');
 ....
 function draw(img, x, y){
   context.drawImage(img, x, y);
 }

 //actulaly there is loop here, but for simplicity I put only this.
 var img = new Image();
 img.src = "images/a.png";
 img.onload = draw(img, 10, 10); 

如果我使用常规的 PNG 图像，它可以工作，但如果使用具有透明度且背景被删除的 PNG，它就无法工作。 你们知道为什么吗？谢谢。

Answer 1

img.onload 接受函数引用而不是函数调用。

这样做：

img.onload=function(){draw(img,10,10);}

如果需要加载很多图片，这里有一个图片预加载器，在调用 start() 函数之前完全加载所有图片：

// image loader

// put the paths to your images in imageURLs[]
var imageURLs=[];  
// push all your image urls!
imageURLs.push("");
imageURLs.push("");

// the loaded images will be placed in images[]
var imgs=[];

var imagesOK=0;
loadAllImages(start);

function loadAllImages(callback){
    for (var i=0; i<imageURLs.length; i++) {
        var img = new Image();
        imgs.push(img);
        img.onload = function(){ 
            imagesOK++; 
            if (imagesOK>=imageURLs.length ) {
                callback();
            }
        };
        img.onerror=function(){alert("image load failed");} 
        img.crossOrigin="anonymous";
        img.src = imageURLs[i];
    }      
}

function start(){

    // the imgs[] array now holds fully loaded images
    // the imgs[] are in the same order as imageURLs[]

}