1 
var c=document.getElementById("cvs");
var ctx=c.getContext("2d");
var imgArray = [];          
for (var i=0;i<data.length;i++){
    var drawRepeat = Math.floor((data[i]/divider)); 
    imgArray[i] = [];   
    for (var j=0;j<drawRepeat;j++){
            //alert(j);
        var xPos = ((i*30)+10);
        var yPos = 250-((j*30)+30);
        imgArray[i][j] = new Image();
        imgArray[i][j].src="assets/orange.png";
        imgArray[i][j].onload = function(){
        ctx.drawImage(imgArray[i][j],xPos,yPos);
        };

    }
}

forループで複数の画像を描画したい。奇妙なことに、forループでalert()を配置すると機能しますか? しかし、コメントを外すと、画像の1つだけが表示されます。

これに対する解決策はありますか？

4

3 に答える 3

3

それが閉鎖に関連する問題です。コードを教えてから説明します。

var c = document.getElementById("cvs");
var ctx = c.getContext("2d");
var imgArray = [];
for (var i = 0; i < data.length; i++) {
    var drawRepeat = Math.floor((data[i] / divider));
    imgArray[i] = [];
    for (var j = 0; j < drawRepeat; j++) {
        //alert(j);
        (function (_i, _j) {
            var xPos = ((_i * 30) + 10);
            var yPos = 250 - ((_j * 30) + 30);
            imgArray[_i][_j] = new Image();
            imgArray[_i][_j].src = "assets/orange.png";
            imgArray[_i][_j].onload = function () {
                ctx.drawImage(imgArray[_i][_j], xPos, yPos);
            };
        })(i, j);
    }
}

更新：

私がこの奇妙なことをしている理由は、onloadイベントに登録された関数が非同期的に呼び出されるためです。つまり、ループが継続し、その瞬間ではなく、画像が読み込まれたときに関数が呼び出されます。したがって、このループは継続し、完了すると (これは完了前でも発生する可能性があることに注意してください)、iの値は になりますdata.length - 1。ここで、いくつかの画像が読み込まれ、関数が呼び出されます。この関数は、i(指定したコードで) を参照しますが、これは今ではdata.length - 1です。そのため、最後の画像のみが描画されます。私はこれが紛らわしいことを知っています - 私が最初に閉鎖に出くわしたとき、私でさえ混乱を感じました. それらに関する優れた記事を読むことをお勧めします。問題が何であるかがわかります。

私たちが行ったことは、すぐに呼び出され、パラメータとしてandの値が渡される無名関数を作成することによって、スコープを作成することでした(専門家はこの式に問題を見つける可能性があります) 。の名前ですが、混乱を避けるために同じ名前は使用しませんでした)。現在、これらは関数に対してローカルであり、変更されていません。そのため、画像がロードされると、配列内の画像を描画する onload 関数が呼び出されます。ij_i_ji_i

うまく説明できなかったので、先ほど言ったように、クロージャーに関する記事を読んでください。

于 2012-06-06T15:15:27.013 に答える
0

onload ハンドラーを使用する代わりに、画像をプリロードします。

于 2012-06-06T15:05:38.723 に答える