HTML5 - drawImage沒有繪製其他圖層

Question

我正在使用drawImage試圖繪製圖塊和玩家。它的作品，但它首先吸引玩家然後瓷磚。這應該是相反的，因爲現在我看不到我的球員。

我如何知道我的播放器正在繪製？因爲如果我拿出什麼畫瓦片（if (loadedImagesCount==NUM_OF_TILES) draw();），那麼我可以看到我的球員。此外，播放器繪製的消息總是彈出。

幫助？

這裏是我的代碼：

// HTML5 JS Tile Example 
var canvas, context, board, imageObj, tiles; 
var currentMap = 1; 
var upMap = 0; 
var rightMap = 0; 
var leftMap = 0; 
var downMap = 3; 
var NUM_OF_TILES = 16; // starting from ZERO 

    var spawnX = 9; // spawn on X position 
    var spawnY = 7; // spawn on Y position 
    var playerImg = new Image(); 
    var currX = 9; // current X position 
    var currY = 7; // current Y position 

// Set return 2D array of map 
function loadMap(map) { 
    if (map == 1) { 
     return [ 
     [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], [1, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 1], [1, 13, 1, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 1], [1, 13, 1, 13, 1, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 1], [1, 13, 1, 13, 1, 13, 1, 13, 13, 13, 13, 13, 1, 13, 13, 1], [1, 13, 13, 13, 1, 13, 1, 13, 1, 13, 13, 13, 1, 13, 13, 1], [1, 13, 13, 13, 13, 13, 1, 13, 1, 13, 1, 13, 1, 13, 13, 1], [1, 13, 13, 13, 13, 13, 13, 13, 1, 13, 1, 13, 13, 13, 13, 1], [1, 13, 13, 13, 13, 13, 13, 13, 13, 13, 1, 13, 13, 13, 13, 1], [1, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 1], [1, 1, 1, 1, 1, 1, 1, 1, 1, 13, 1, 1, 1, 1, 1, 1] 
     ]; 
    } 
} 

var drawPlayer = function() {   
     realSpawnX = spawnX * 32; 
     realSpawnY = spawnY * 32; 
     playerImg.src = "me.gif"; 
     context.drawImage(playerImg, realSpawnX, realSpawnY, 32, 32); 
     console.log("Player drawn at (" + spawnX + "," + spawnY + ") Real spawn: X: " + realSpawnX + " Y: " + realSpawnY); 
} 


window.onload = function() { 
    canvas = document.getElementById("canvas"); 
    context = canvas.getContext("2d"); 
    imageObj = new Image(); 
    tiles = []; 
    board = loadMap(1); 

    canvas.width = 512; 
    canvas.height = 352; 

    // Draw the player .,.. now 
    drawPlayer(); 

    var draw = function() { 
     var theX; 
     var theY; 
     // 3. DRAW MAP BY ROWS AND COLS 
     for (x = 0; x <= 10; x++) { 
      for (y = 0; y <= 15; y++) { 

       theX = x * 32; 
       theY = y * 32; 
       context.drawImage(tiles[board[x][y]], theY, theX, 32, 32); 
      } 
     } 
    } 

    var loadedImagesCount = 0; 

    // 2. SET UP THE MAP TILES 

    for (x = 0; x <= NUM_OF_TILES; x++) { 
     var imageObj = new Image(); // new instance for each image 
     imageObj.src = "line_tile/t" + x + ".png"; 
     imageObj.onload = function() { 
      loadedImagesCount++; 
      if (loadedImagesCount==NUM_OF_TILES) draw(); 
     }; 
     tiles.push(imageObj); 
    } 


}; 

Answer 1

這裏就是我的意思，它應該是顯而易見的，我所做的改動：

// HTML5 JS Tile Example 
var canvas, context, board, imageObj, tiles; 
var currentMap = 1; 
var upMap = 0; 
var rightMap = 0; 
var leftMap = 0; 
var downMap = 3; 
var NUM_OF_TILES = 16; // starting from ZERO 

    var spawnX = 9; // spawn on X position 
    var spawnY = 7; // spawn on Y position 
    var playerImg = new Image(); 
    var currX = 9; // current X position 
    var currY = 7; // current Y position 

// Set return 2D array of map 
function loadMap(map) { 
    if (map == 1) { 
     return [ 
     [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], [1, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 1], [1, 13, 1, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 1], [1, 13, 1, 13, 1, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 1], [1, 13, 1, 13, 1, 13, 1, 13, 13, 13, 13, 13, 1, 13, 13, 1], [1, 13, 13, 13, 1, 13, 1, 13, 1, 13, 13, 13, 1, 13, 13, 1], [1, 13, 13, 13, 13, 13, 1, 13, 1, 13, 1, 13, 1, 13, 13, 1], [1, 13, 13, 13, 13, 13, 13, 13, 1, 13, 1, 13, 13, 13, 13, 1], [1, 13, 13, 13, 13, 13, 13, 13, 13, 13, 1, 13, 13, 13, 13, 1], [1, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 1], [1, 1, 1, 1, 1, 1, 1, 1, 1, 13, 1, 1, 1, 1, 1, 1] 
     ]; 
    } 
} 

var drawPlayer = function() {   
     realSpawnX = spawnX * 32; 
     realSpawnY = spawnY * 32; 
     playerImg.src = "me.gif"; 
     context.drawImage(playerImg, realSpawnX, realSpawnY, 32, 32); 
     console.log("Player drawn at (" + spawnX + "," + spawnY + ") Real spawn: X: " + realSpawnX + " Y: " + realSpawnY); 
} 


window.onload = function() { 
    canvas = document.getElementById("canvas"); 
    context = canvas.getContext("2d"); 
    imageObj = new Image(); 
    tiles = []; 
    board = loadMap(1); 

    canvas.width = 512; 
    canvas.height = 352; 

    // Draw the player .,.. now 
    //*************No, later 

    var draw = function() { 
     var theX; 
     var theY; 
     // 3. DRAW MAP BY ROWS AND COLS 
     for (x = 0; x <= 10; x++) { 
      for (y = 0; y <= 15; y++) { 

       theX = x * 32; 
       theY = y * 32; 
       context.drawImage(tiles[board[x][y]], theY, theX, 32, 32); 
      } 
     } 
    } 

    var loadedImagesCount = 0; 

    // 2. SET UP THE MAP TILES 

    for (x = 0; x <= NUM_OF_TILES; x++) { 
     var imageObj = new Image(); // new instance for each image 
     imageObj.src = "line_tile/t" + x + ".png"; 
     imageObj.onload = function() { 
      loadedImagesCount++; 
      if (loadedImagesCount==NUM_OF_TILES) { 
       draw(); 
       drawPlayer(); 
      } 
     }; 
     tiles.push(imageObj); 
    } 
}; 

的問題是瓦片被吸入的onload事件 - 當瀏覽器完成從網絡獲取圖像時執行。因此，無論您撥打drawPlayer的電話號碼，是否需要花費超過一毫秒的時間才能加載最後繪製的所有拼貼圖像。解決方法是在onload處理程序中擴展代碼塊，在該處理程序中測試是否加載了所有圖像（此位爲：if (loadedImagesCount==NUM_OF_TILES)），以便您可以按順序繪製地圖和播放器。