Html5 canvas Canvas ctx.drawImage无法使用透明PNG

当我使用透明PNG时，ctx.drawImage（）不起作用，但当我使用常规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图像，背景被删除，它就不工作了。

---

你们知道为什么吗？谢谢。

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[]

}

//图像加载程序
//将图像的路径放在imageURLs[]
var-imageurl=[]；
//推送你所有的图片网址！
ImageURL.push（“”）；
ImageURL.push（“”）；
//加载的图像将放置在图像[]中
var-imgs=[]；
var-imagesOK=0；
加载图像（开始）；
函数LoadAllImage（回调）{
for（var i=0；i=imageURL.length）{
回调（）；
}
};
img.onerror=function（）{alert（“映像加载失败”）；}
img.crossOrigin=“匿名”；
img.src=imageURL[i]；
}      
}
函数start（）{
//imgs[]阵列现在保存完全加载的图像
//imgs[]与ImageURL[]的顺序相同
}

仍不工作。函数draw（）被调用了11550次（我在那里有一个console.log），但它什么也没画。有趣的是，控制台中也没有错误。如果我使用另一个没有透明度的PNG文件，它确实可以工作。啊…通过循环11500次…好的，如果

var img

在循环中，那么在

img

的第一次迭代完全加载之前，循环的下一次迭代很可能会替换

img

。因此，请确保在第一次onload完成之前，不会执行循环的下一次迭代。可能不相关，但将.onload放在.src之前（以防万一）。是的，它在一个循环中。您可能是对的，因为现在“var img”在循环中，它与以前工作过的图像都不起作用。我会试试的，谢谢。也谢谢你提供的代码。是的，这就是问题所在，我需要画很多不同的图像。谢谢你的密码，非常感谢你，马克。现在我明白了代码的真正价值。我不熟悉回调的概念，因为我来自java背景。