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)），以便您可以按顺序绘制地图和播放器。