第一次函數調用時未顯示圖像 - HTML5/Canvas

當我單擊按鈕時，以下代碼應該在網格中顯示圖像。問題是我必須點擊按鈕兩次才能看到圖像。即使圖像不顯示，我也可以在兩個函數調用中獲得日誌輸出。這是怎麼回事？第一次函數調用時未顯示圖像 - HTML5/Canvas

編輯：我發現問題只發生在鉻開發工具打開時，所以它不是一個JavaScript問題。

EDIT2：除了公認的答案，這個環節幫我：Javascript Canvas Element - Array Of Images

<html> 
    <head> 
     <title>Canvas Test</title> 

     <script> 
      function init() { 
       var canvas = document.getElementById("canvas"); 
       context = canvas.getContext("2d"); 
       images = new Array(); 
      } 

      function drawImage() { 
       for (var i = 0; i < 12; i++) { 
        for (var j = 0; j < 12; j++) { 
         var index = i*12 + j; 
         images[index] = new Image(); 
         images[index].src = 'image.jpg'; 
         images[index].onload = function(image, index, i, j) { 
          console.log(index); 
          context.drawImage(image, i * 20, j * 20, 20, 20); 
          console.log("Loading image: " + image.src); 
         } (images[index], index, i, j); 
        } 
       } 
      } 
     </script> 

    </head> 
    <body onload="init();"> 
     <canvas id="canvas" width="300px" height="300px" style="border: solid;"></canvas> 
     <button onclick="drawImage();">Display Image</button> 
    </body> 
</html>

來源

2012-06-08 gsingh2011

其實你的代碼工作。但有時圖片沒有加載，你將不得不點擊按鈕兩次。

Try it here.

2個問題：

首先，

function(image, index, i, j) { 
    console.log(index); 
    context.drawImage(image, i * 20, j * 20, 20, 20); 
    console.log("Loading image: " + image.src); 
}(images[index], index, i, j);

這將觸發正確的方式，因爲()末手段來運行它。這就是爲什麼你必須點擊兩次。

其次，src應該最後。（MDN）（但實際上並不重要）

要修復它，您必須使該函數不會立即運行。另外，因爲它在一個循環內部，並且它使用範圍變量，所以需要額外的關注。查看演示中的代碼。

>FIXED DEMO!<

來源

2012-06-08 01:39:16

它的工作，但爲什麼？ – gsingh2011

這是你所期望的嗎？ http://jsfiddle.net/DerekL/W5cBn/3/（新） –

是的，這就是我在代碼上運行時得到的結果。但我不明白你的改變爲什麼會有所作爲。 – gsingh2011

第一次函數調用時未顯示圖像 - HTML5/Canvas

回答

相關問題