canvas.drawImage不繪製所有圖像

我想在畫布上繪製多個圖像（背景，在背景上的另一個圖像，和該圖像上又一個圖像會來），但有時它加載圖像和有時不是，我用setTimeout延遲drawImage和加載，但仍然無法正常工作。canvas.drawImage不繪製所有圖像

if(somecondition) 
{ 
    //background image is 70kb 
    //image on background is 65kb 

    img3.src = "Image path"; //images is almost 2kb 
    img4.src = "Image path"; //images is almost 2kb 
    img5.src = "Image path"; //images is almost 2kb 
    img6.src = "Image path"; //images is almost 2kb 
    setTimeout(function() 
    { 
     img3.onload = function() 
     { 
      context.drawImage(img3, 272, 139, 172, 31); 
     } 
    },1000); 
    console.log("Linesss2 > 4 "+lines2); 
    bottomY = 290+((lines1-5)*10); 
    middleHeight = bottomY - 170; 




    setTimeout(function() 
    { 
     img4.onload = function() 
     { 
      context.drawImage(img4, 272, 170, 172, middleHeight); ///272 
     } 
     img6.onload = function() 
     { 
      context.drawImage(img6, 272, bottomY, 172, 71); 
     } 
    },1000); 

    } 
    var metrics1 = context.measureText(canvasText1); 
    var testWidth1 = metrics1.width; 

    var metrics2 = context.measureText(canvasText2); 
    var testWidth2 = metrics2.width; 

    context.fillText(canvasText1, 169.5-(testWidth/2), y-20); 
    context.fillText(canvasText2, 169.5-(testWidth/2), y-20); 
    wrapTextForCanvas1(context, canvasText1, 50, 180); 
    wrapTextForCanvas2(context, canvasText2, 260, 180); 
}

來源

2012-10-12 SML

建議：如果你希望人們調試代碼，創建的jsfiddle（www.jsfiddle.net），並張貼鏈接在這裏。 –

它們沒有被繪製，因爲'onload'可能在你的'setTimeout'被調用之前被觸發。 – Shmiddty

因此，您不想運行任意超時，您希望在每個圖像加載時收到通知。這樣你就可以確定它們在你開始嘗試使用它們之前已經全部加載了。只需設置每個圖像的onload回調，以增加一個計數器。當該計數器達到您必須加載的圖像數量時，它們全部完成，您可以開始使用它們。

我最近回答了另一個問題。在這裏看到修改後的代碼： http://jsfiddle.net/enhzflep/RLP5Y/

還是這裏的問題本身：Images from previous functions are not drawn in the background (Canvas)

來源

2012-10-12 05:55:29 enhzflep

感謝「enhzflep」，我會試試這個。 – SML

canvas.drawImage不繪製所有圖像

回答

相關問題