奇蟲與HTML5畫布的drawImage

的jsfiddle（注：它不會顯示任何東西，它只是一個讓我展示我的代碼在一個整齊的格式方式）http://jsfiddle.net/h6tVR/奇蟲與HTML5畫布的drawImage

我是新來的HTML5的畫布，並已決定玩一下，看看我能用它做什麼。到目前爲止，我已經能夠得出一個本地託管圖像到畫布上，甚至做一些基本的平鋪：

window.onload = function(){ 

    var GameClosure = function() { 

     var canv = document.getElementById("canv"); 
     var canvContext = canv.getContext("2d"); 

     var sprite = new Image(); 
     sprite.src = "sprite.png" 

     var tile = new Image(); 
     tile.src = "tile.png" 

     function loadSprite(){ 
      sprite.onload = function(){ 
       canvContext.drawImage(sprite, 50, 50); 
       }; 
     } 

     function loadTiles(){ 
      tile.onload = function(){ 
       for(var i = 0; i < 800; i += 16){ 
        for(var r = 0; r < 608; r += 16){ 
         canvContext.drawImage(tile, i, r); 
        } 
       } 
      }; 
     } 

     return{ 
      loadTiles: loadTiles, 
      loadSprite: loadSprite 
      }; 

    }(); 

    GameClosure.loadTiles(); 
    GameClosure.loadSprite(); 

}

我得到一個奇怪的問題與此有關。當我加載時，大多數時候，只有瓷磚會加載。到目前爲止，我已嘗試了幾件事情，我已調用GameClosure.loadTiles() and GameClosure.loadSprite();調用以查看加載順序是否有所不同。它沒有。我甚至嘗試創建第二個上下文並將tile分配給一個，將精靈分配給另一個，但這沒有什麼區別。註釋拼貼會正確生成拼圖。

它變得更加奇特。我很快刷新了頁面，偶爾會發現（沒有任何模式，有時會連續發生3次，其他時間發生在20次之後），瓷磚會加載，並且精靈會像我期望的那樣載入頂部至。

這可以修復嗎？我唯一的猜測是我的代碼有點異步運行，並且在加載完精靈之後創建tile的for循環正在完成，但是看着我的代碼，我沒有看到可能發生的情況。

來源

2013-11-22 BenM

當您設置onload處理程序時，您的javascript將在後臺加載資源時繼續。該處理程序將在資源加載時執行。你無法確定何時會發生什麼，以什麼順序發生。

如果您有多個資源並想在最後一個加載的時刻調用繪圖函數，則可以使用全局預加載器對象。每個onload處理程序都應該調用preloader上的函數來通知它已加載資源。該函數應檢查是否所有資源都已報告，並在何時執行繪圖函數。

此外，當您設置onload處理程序和資源已被加載。當您設置.src並且資源位於瀏覽器緩存中時，它將立即加載。所以你總是需要第一個集合.onload和然後集合.src。

來源

2013-11-22 21:51:11 Philipp

謝謝。這個解釋幫助我更好地理解我做錯了什麼。我已經改變了我的代碼，現在我已經開始工作了。 – BenM

將問題分開。等待所有資源被加載（和文檔），然後啓動你的遊戲。總是要確保在之前掛鉤事件處理程序，以避免「隨機」（與緩存相關，實際上）行爲。

來源

2013-11-22 21:42:01 GameAlchemist

我認爲使用行sprite.onload可以確保資源在被訪問之前被加載？ – BenM

我真的認爲解決這個問題不值得。單獨的擔憂。當所有被加載時，啓動你的遊戲。如果出現加載時間問題，換個方式看，但現在，加載兩張圖片，然後啓動你的遊戲，一切都很好！ :-) – GameAlchemist

謝謝。雖然菲利普斯的回答給了我需要解決這個問題的細節，但你也是對的，並且有所幫助。 – BenM

奇蟲與HTML5畫布的drawImage

回答

相關問題