不能在for循環

我有是假設下面的代碼畫布創建圖像做到以下幾點：不能在for循環

創建動態HTML頁面上2個畫布元素（這工作正常）
對於每個Canvas元素，檢查allSteps變量，它表示圖像應該出現在canvas元素的什麼位置。在這個硬編碼的例子中，它應該在第一個畫布底部顯示兩個黑色框，在第二個畫布底部顯示兩個棕色框。（這不能正常工作）。所有圖像都是50x50。

出於某種原因，它僅在第二個畫布的末尾加載一個圖像。

<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> 
    <script type="text/javascript" language="javascript"> 
    $(document).ready(function() { 

     var boxImages = ['img/white.jpg', 'img/blue.jpg', 'img/black.jpg', 'img/brown.jpg', 'img/green.jpg', 'img/red.jpg']; 
     var IMAGE_WIDTH=50; 
     var MAX_COLS = 7; 
     var MAX_ROWS = 8; 
     var numberOfSteps = 2; 
     var allSteps = []; 
     allSteps[0] = '0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2 2'; 
     allSteps[1] = '0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3 3'; 

     $('#result_div').html('<p>All Steps : ' + allSteps + '</p>'); 

     for (count=0; count < numberOfSteps; count++) 
     { 
      $('#result_div').append('<h3>Step : ' + count + '</h3>'); 
      $('#result_div').append('<p><canvas id="resultCanvas' + count + '" width="350" height="400" style="border:1px solid #c3c3c3;" ></p>'); 
      resultCanvas=document.getElementById('resultCanvas'+count); 
      resultCtx = resultCanvas.getContext("2d"); 

      currentSolution = allSteps[count].split(" "); 
      for (r=0; r < MAX_ROWS; r++)  
      { 
       for (c=0; c < MAX_COLS; c++) 
       { 
        imgNumber=currentSolution[((r)*MAX_COLS)+c]; 
        if (imgNumber != 0) 
        {     

         boxX = (c*IMAGE_WIDTH); 
         boxY = (r*IMAGE_WIDTH); 
         cimg=new Image(); 
         cimg.onload = function(){resultCtx.drawImage(cimg,boxX,boxY);}; 
         cimg.src=boxImages[imgNumber]; 
        }       
       } 
      } 
     } 
    }); 
    </script> 
<body> 

<div id="result_div"></div> 


</script> 
</body> 
</html>

來源

2012-04-12 user1328174

我沒有測試，但我猜你覆蓋你cimg.src和cimg.onload快於圖像的實際加載。你是否嘗試過使用圖像數組呢？

var cimgs = []; 

    var IMAGE_WIDTH=50; 
    /* 
     ... 
    */ 

      if (imgNumber != 0) 
      {     

       boxX = (c*IMAGE_WIDTH); 
       boxY = (r*IMAGE_WIDTH); 
       cimgs.push(new Image()); 
       cimgs[cimgs.length - 1].onload = (function(img,x,y){ 
        return function(){resultCtx.drawImage(img,x,y);}; 
       })(cimgs[cimgs.lenght - 1],boxX,boxY); 
       cimgs[cimgs.length - 1].src = boxImages[imgNumber]; 
      }       
     }

來源

2012-04-12 05:42:16 Zeta

這也是我的猜測。在使用canvas和圖像時，您應該始終確保onload事件在嘗試繪製所有圖像之前已經觸發了它，因爲如果它尚未加載，甚至可能會導致錯誤。 – 2012-04-12 06:15:49

我測試了這個，但沒有奏效。更改後，沒有顯示圖像（與之前相反）。請問爲什麼這裏使用數組？它是否允許圖像加載/渲染過程與循環同步？在繪製下一個圖像之前，還有其他方法可以確保onload事件已經爲圖像啓動了嗎？感謝你們所有的幫助，我很樂意閱讀任何參考資料，在這裏我可以找到關於這個主題的更多信息。 :) – user1328174 2012-04-13 01:43:23

在此處找到解決方案：http：//www.boogdesign.com/examples/canvas/multiple-onload.html – user1328174 2012-04-13 04:12:31

不能在for循環

回答

相關問題