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 に答える