Question

好的，我有一个HTML5画布......它从.png个图块（32x32）中绘制图像。有用。有点。它仅在第二次刷新后在画布上绘制。例如，如果你要加载它...你会看到是一个红色的画布（#canvas的背景是红色的）然后如果你要刷新它...它将成功绘制图像......为什么会这样？

这是代码。（您只需要两张图片。t0.png和t1.png line_tiles文件夹中的game.js但我确信您可以立即发现错误：P

// 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 = 1; // starting from ZERO // 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, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]]; } } // On load... window.onload = function () { canvas = document.getElementById("canvas"); context = canvas.getContext("2d"); imageObj = new Image(); tiles = []; board = loadMap(1); canvas.width = 512; canvas.height = 352; // 2. SET UP THE MAP TILES for (x = 0; x <= NUM_OF_TILES; x++) { imageObj = new Image(); // new instance for each image imageObj.src = "line_tile/t" + x + ".png"; tiles.push(imageObj); } 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); } } };

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>HTML5</title> <script type="text/javascript" src="game.js"></script> <style type="text/css">  </style> </head> <body> <div class="container"> <canvas id="canvas"></canvas> </div> </body> </html>

{{1}}

Answer 1

您需要在图像（图块）上添加onload挂钩，并仅在加载所有图像时进行绘制。

这是一个建议：

// 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 = 1; // starting from ZERO

// 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, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]];
    }
}


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

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

    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);
    }

};

小心不要忘记var关键字（查看循环）。

HTML5 Canvas drawImage仅在第二次刷新后绘制

1 个答案: