3

我有一个图像文件夹，总共 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[520]）。实际上我想加载所有的瓷砖。无论。如何正确地将一组图像放入数组并加载它？

4

2 回答 2

6

您修改了 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);
}
于 2012-04-21T00:15:35.340 回答
2

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

我不确定在将图像添加到图块数组之前是否不需要先查看图像是否已实际加载。

于 2012-04-21T16:02:21.350 回答