Javascript 在画布中绘制平铺贴图

我试图在HTML5画布上使用64x64可平铺图像绘制平铺贴图。它们被命名为1.png、2.png和3.png。它们只是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';
}

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'，'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，
图像=新图像（）；
对于（var j=0；j

---

出于某种原因，它似乎在一个地方绘制所有图像。我认为这与

image.onload=function（）{}

有关。有谁能帮我把这段代码画成每幅64像素的图像（图像的宽度和高度）。

你需要在onload处理程序中启动你的循环。在循环中进行onload只会触发一次（当映像已加载时，而不是因为循环）

---

对于最终代码，还应该添加一个错误处理程序。

这几乎可以实现。我还忘了提到，我的图片分别命名为1.png、2.png和3.png。这只为一些奇数绘制了2.pngreason@user3255156一个更简单的图像加载器可能会有所帮助：我已经下载了它，解压缩了它，并将它粘贴在那里。你能告诉我如何在我的代码中使用它吗？@user3255156这有点困难，因为你没有显示问题中加载的任何其他图像，或者你打算如何使用它们，它们包含的内容等。我建议首先用这些详细信息更新问题，以便我们能够立即找到正确的解决方案。我发布了它们的描述，不会让我发布图像，因为我的帐户是新的。希望对你有帮助。。

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

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