多畫布圖像隨機出現

我想將不同的圖像應用於多個畫布。多畫布圖像隨機出現

圖像被傳遞到一個json數組中，該數組在後面的代碼中生成，然後通過繪製到那裏特定的畫布。

現在這似乎有時偶爾渲染有時不工作。

所以這裏是代碼。

function renderPlayer() { 
     var imagesList = <%=imageList %>; 
     var size = imagesList.length; 
     for(var key in imagesList) 
     { 
      var image = imagesList[key][1]; 
      var gridPosition = imagesList[key][0]; 
      var playerCanvas = document.getElementById(gridPosition); 
      window.context2 = playerCanvas.getContext("2d"); 
      //context2.save(); 
      playerCanvas.setAttribute("width", 97); 
      var imageObj = new Image(); 
      imageObj.src = image; 
      context2.drawImage(imageObj, 0, 10, 97, 97); 
     } 
    }

上面的代碼將它們放置在我期望它們的位置，但在每次頁面呈現時都沒有。

但是，下面的代碼似乎只呈現最後一張圖片。

 function renderPlayer() { 
     var imagesList = <%=imageList %>; 
     var size = imagesList.length; 
     for(var key in imagesList) 
     { 
      var image = imagesList[key][1]; 
      var gridPosition = imagesList[key][0]; 
      var playerCanvas = document.getElementById(gridPosition); 
      window.context2 = playerCanvas.getContext("2d"); 
      //context2.save(); 
      playerCanvas.setAttribute("width", 97); 
      var imageObj = new Image(); 
      imageObj.onload = function(){ 
      context2.drawImage(imageObj, 0, 10, 97, 97); 
      }; 
      imageObj.src = image; 

     } 
    }

有沒有人有任何建議，爲什麼這可能不工作？

來源

2013-04-11 Dashwall

同樣的老問題......你的所有圖像onload方法指的是每次在循環中被覆蓋的一個且只有imageObj。

for(var key in imagesList) 
{ 
    var image = imagesList[key][1]; 
    var gridPosition = imagesList[key][0]; 
    var playerCanvas = document.getElementById(gridPosition); 
    window.context2 = playerCanvas.getContext("2d"); 
    //context2.save(); 
    playerCanvas.setAttribute("width", 97); 
    (function(){ 
     var imageObj = new Image(); 
     imageObj.onload = function(){ 
      context2.drawImage(imageObj, 0, 10, 97, 97); 
     }; 
     imageObj.src = image; 
    })(); 
}

通過在立即執行功能塊包裹，每個imageObj變得它自己的變量，其中，每個功能的onload捕獲。

來源

2013-04-11 14:15:43 JayC

感謝這個JayC。只有一個圖像出現在瀏覽器中的問題仍然存在，但是當我逐步瀏覽Chrome中的代碼時，所有3個圖像都像我期望的那樣出現，而不是正常運行。 – Dashwall 2013-04-11 14:34:27

爲什麼我們要爲這三個圖像發出完全相同的'drawImage'命令，是否有任何理由？圖紙應該是連續的，但延遲？我在這裏錯過了一些東西。 – JayC 2013-04-11 16:36:00

是的，實際上這是正確的答案，所有缺少的是在即時執行函數中傳遞我需要的變量。所以在我的情況下，它是需要在兩個括號內的context2和image。十分感謝你的幫助。 – Dashwall 2013-04-12 07:20:45

第一個示例失敗，因爲您需要先等待圖像加載，然後才能在畫布中繪製該圖像。隨機性是由於有時圖像會在您運行context2.drawImage(..)命令時加載，有時它不會，通過將此代碼放入圖像的onload處理程序中，您應該保證圖像數據存在。

第二個例子看起來更好，但你應該改變onLoad到onload和移動線

var playerCanvas = document.getElementById(gridPosition); 
var context2 = playerCanvas.getContext("2d");

的for循環外，還要注意切換到第二行。

來源

2013-04-11 14:13:40 codebox

對不起第二個例子實際上是由我自己加載一個錯字 – Dashwall 2013-04-11 14:16:37

多畫布圖像隨機出現

回答

相關問題