JavaScript循環/範圍問題與Image.onload（）

Question

我試圖通過JavaScript循環對象，並將該對象的所有子對象添加到HTML5畫布。

畫布位正在工作，沒有問題，但由於某種原因，我的所有圖像最終都是相同的大小 - 最後一個子對象'背景'的大小。我假設它與我的循環和'this'的範圍有關，但我真的不知道要改變什麼;

var stage; 
var items = { 
    head: {image: null, path: "images/avatar-elements/head01.png", w:200, h:200}, 
    hair: {image: null, path: "images/avatar-elements/hair01.png", w:200, h:200}, 
    nose: {image: null, path: "images/avatar-elements/nose01.png", w:200, h:200}, 
    eyes: {image: null, path: "images/avatar-elements/eyes01.png", w:200, h:200}, 
    eyebrows: {image: null, path: "images/avatar-elements/eyebrows01.png", w:200, h:200}, 
    ears: {image: null, path: "images/avatar-elements/ears01.png", w:200, h:200}, 
    background: {image: null, path: "images/avatar-elements/background01.png", w:500, h:370} 
}; 

function initCanvas() { 
    stage = new Kinetic.Stage("canvas", 500, 370); 
    makeBasis(); 
} 


function makeBasis() { 
    for(i in items) { 
     var img = new Image(); 
     img.onload = function() { 
      items[i].image = makeCanvasImage(this, items[i].w, items[i].h); 
     } 
     img.src = items[i].path; 
    } 


} 

function makeCanvasImage(tar, w, h) { 
    var theImage = new Kinetic.Image({ 
     imageObj: tar, 
     x: 250 - (w/2), 
     y: 185 - (h/2), 
     width: w, 
     height: h 
    }); 
    stage.add(theImage); 
    return theImage; 
} 

initCanvas(); 

Answer 1

錯誤在makeBasis（）中。循環所有圖像後，我被設置爲最後 - 經典閉合問題。嘗試使用這樣的：

function makeBasis() { 
    for(i in items) { 
     var img = new Image(); 
     img.onload = (function (nr) { 
      return function() { 
       items[nr].image = makeCanvasImage(this, items[nr].w, items[nr].h); 
      } 
     }(i));  
     img.src = items[i].path; 
    } 
}