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

HTML5 - drawImage没有绘制在其他图层上

1 个答案: