基於Windows 8 html5 canvas的應用程序中的奇怪行爲

Question

我正在開發Windows 8 JavaScript應用程序。

我嘗試在畫布中加載圖像，但是當我直接使用CTRL + F5運行應用程序時，應用程序仍在運行，但畫布上沒有圖像。

當我調試應用程序時沒有放置斷點，應用程序直接打開但仍然沒有圖像。

當我調試應用程序並放置一個breakpoint，然後在圖像生成代碼完成時一步一步地運行代碼我通過單擊調試符號繼續調試，現在圖像顯示在畫布上。我不知道這裏發生了什麼，爲什麼它只顯示帶有斷點調試的圖像。爲什麼在我沒有調試的情況下正常運行時沒有顯示圖像？

下面是圖像生成代碼。

Init: function (canvas,ctx) { 

    this.ghostCanvas = canvas; 
    this.ghostCanvasCtx = ctx; 

    var banner = new Image(); 
    banner.src = "images/banner.jpg"; 

    ctx.drawImage(banner, 100, 100); 
} 

當我放置一個斷點並逐行運行它時，此代碼有效。此外，我使用兩個畫布之一的頂部。但是這個畫布的z-index更大，所以應該沒有問題。什麼導致這個問題？

Answer 1

您需要等待圖像加載才能在畫布上繪製。在圖像對象上添加一個事件處理程序以用於「加載」事件，並且當它被稱爲，則在畫布上繪製圖像。