Canvas ctx.drawImage無法使用透明PNG

Question

當我使用透明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，它不起作用。 你們有什麼想法，爲什麼？謝謝。

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

}