2

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

这是代码。（您只需要两张图片。在文件夹t0.png中）但我相信您可以立即发现我无法发现的错误：Pt1.pngline_tiles

game.js

// 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">
<!--
 #canvas {
       background:red;
       z-index:0;
       position:relative;       
    }

.container {
    width: 512px;
    position: relative;   
}
-->
</style>
</head>
<body>
<div class="container">
<canvas id="canvas"></canvas>
</div>
</body>
</html>
4

1 回答 1

5

您需要在图像（图块）上添加 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 关键字（查看循环）。

于 2012-04-25T18:59:34.433 回答