Question

我有一个图像文件夹，总共32x32个图块。我正在尝试使用JavaScript将这些图像加载到HTML5画布上。

这就是我所拥有的：

window.onload = function(){
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var imageObj = new Image();
    var tiles = [];

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


    for (x = 0; x <= 520; x++) {
        imageObj.src = "line_tile/t"+x+".png";
        tiles.push(imageObj);
    } 

    var theX;
    var theY;
    for (x = 0; x <= 10; x++) {
        for (y = 0; y <= 15; y++) {

            theX = x*32;
            theY = y*32;

            context.drawImage(tiles[2], theY, theX,32,32);
            console.log("Tile X: "+x+" | Tile Y: "+y+" - X Pos: "+theX+" | Y Pos: "+theY);
        }
    } 
};

问题是此代码仅加载最后一个tile（在本例中为tile[520]）。实际上我想加载所有的瓷砖。无论。如何将一组图像放入数组并加载？

Answer 1

您修改imageObj的单个实例;所以基本上你最终得到的数组都指向同一个实例，以520结尾。

试

for (x = 0; x <= 520; x++) {
    var imageObj = new Image(); // new instance for each image
    imageObj.src = "line_tile/t"+x+".png";
    tiles.push(imageObj);
}

Answer 2

与您的问题没有严格关联，但您可能会遇到它（使用当前代码）

我不确定你是否不需要先看看Image是否实际加载之前将它添加到tiles数组。

JavaScript / HTML5 Canvas - 加载图像数组

2 个答案: