javascript - 在 Canvas 中绘制平铺 map

Question

我正在尝试使用 64x64 可平铺图像在 HTML5 Canvas 上绘制平铺 map 。它们被命名为 1.png、2.png 和 3.png。它们只是我打算用来平铺在 Canvas 背景上的 64x64 图像。 1.png是纯绿色图像，2.png是纯灰色图像，3.png是纯棕色图像。
这是我的 HTML:

<canvas id='gameCanvas'></canvas>
<script src='Index.js'></script>

这是我的 JavaScript:

var canvas = document.getElementById('gameCanvas'),
ctx = canvas.getContext('2d');
canvas.width = 512;
canvas.height = 512;
var map = ['2','2','2','2','2','2','2','2','2','2',
        '2','1','1','1','1','3','1','1','1','2',
        '2','1','1','1','1','3','1','1','1','2',
        '2','2','2','2','2','2','2','2','2','2'],
x = 0,
y = 0,
image = new Image();

for (var j = 0; j < map.length; j++){
    image.onload = function(){
        if(x == 512){
            x = 0;
         y += 64;
    }
    x += 64;
    ctx.drawImage(image, x, y);
}
image.src = 'Images/' + map[j] + '.png';
}

出于某种原因，它似乎将所有图像绘制在一处。我认为这与 image.onload = functtion(){} 有关。谁能帮我让这段代码将每个图像绘制为 64 像素(图像的宽度和高度)。

Answer 1

您需要在 onload 处理程序内启动循环。在循环内使用 onload 只会触发一次(当图像加载时，而不是因为循环)。

image.onload = function(){
    for (var j = 0; j < map.length; j++){
        /// todo: actually use map index to determine source rectangle
        /// in spritesheet
        if(x == 512){
            x = 0;
            y += 64;
        }
        x += 64;
        ctx.drawImage(this, x, y);  /// todo: need to specify sprite rectangle
    }
}

您可能还需要为您的 drawImage() 方法指定源矩形，但由于您没有显示图像，我们无法判断(您的循环也忽略了 map 图 block 索引) .

更新

好的，根据评论，这里是一个使用 YAIL 加载器(按照建议)加载图像的示例，集成到原始代码中(假设脚本已包含):

Demo (with random tiles)

var canvas = document.getElementById('gameCanvas'),
    ctx = canvas.getContext('2d');

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

var map = [2,2,2,2,2,2,2,2,2,2,  /// use numbers instead of strings here
           2,1,1,1,1,3,1,1,1,2,
           2,1,1,1,1,3,1,1,1,2,
           2,2,2,2,2,2,2,2,2,2],
    x = 0,
    y = 0,

    /// loader code
    loader = (new YAIL({
        done: drawTiles,                    /// called when images are loaded
        urls: ['1.png', '2.png', '3.png']   /// order will be preserved
    })).load();                             /// start loading

function drawTiles(e) {

    /// loop and get map index
    for (var j = 0, tile; tile = map[j]; j++){
        if(x == 512){
            x = 0;
            y += 64;
        }
        ctx.drawImage(e.images[tile - 1], x, y);
        x += 64;
    }
}

还应该为最终代码添加错误处理程序。