0

要素 x キャンバスに追加して、バックボーン モデルをレンダリングしています。次に、ループでそれぞれに画像を描画しています。

問題: 最後のキャンバスだけが描画されているように見え、残りは空白のままです。

コードは次のとおりです: http://pastie.org/private/bt4b4imwd6csrv32gay2yq - レンダリング関数

モデルは次のとおりです: http://pastie.org/private/mvmlbrefzbcgltwyfyfw

onload イベントで画像のソースと実際のキャンバスの ID を出力しましたが、最後のもの (最後のキャンバス ID、最後の画像ソース) だけを x 回 (x = パーツ変数の長さ) だけ取得します。

ありがとう。

4

1 に答える 1

1

これは「ループ内の閉鎖」の問題です。.onloadを使用して、クロージャーを作成します。このクロージャーは、その周囲のスコープにアクセスできますが、作成時ではなく、実行時にアクセスできます。そして、その時点でループは最後の要素に到達しているので、最後の画像への参照のみがありますfaceImg。ctxFace

faceImg解決策：すぐに実行される無名関数を使用して内部クロージャを作成し、現在のループと各ループを渡して、ctxFaceロード時に実行される無名関数を返します

var faceImg = new Image();
faceImg.src = cardsPath + this.model.get('name') + '/faces/'+key+'/'+parts[key];            
faceImg.onload = (function (localCtx, localFaceImg) {
   return function() {localCtx.drawImage(localFaceImg, 0, 0);}
})(ctxFace, faceImg);
于 2012-12-06T14:43:47.903 に答える