HTML5畫布和drawImage

Question

即時建立圖編輯器，它工作正常，拖動&拖放，複製和過去一切正常。但我有圖像麻煩的問題。我有一個render（）函數，每次更改都會運行。在渲染函數中，我調用appendImg代碼。這是第一次運行渲染時完成的。但下一次，我進入else代碼塊，圖像不會在畫布上呈現。我有這個if.else邏輯她，因爲如果我每次運行img.onload somthing改變圖像加載每一次，我在屏幕上閃爍很多。 據我所知，當img obj與數組一起存儲時，drawImage dosent就像它一樣，而我似乎無法將它放在頭上。

var images = []; //An array where images are stored. 

appendImg = function(inx, url, x, y, w, h) { 

    if (!images[inx]) { 
    var img = new Image(); 
    img.onload = function() 
    { 
     dg_context.drawImage(img, x, y, w, h); 
     images[inx] = img; 
    } 
    img.src = url; 
    }else{ 
    var img = images[inx]; 
    console.log(img); 
    dg_context.drawImage(img, x, y, w, h); 
    } 
} 

Answer 1

嘗試存儲INX爲使INX可以在裏面onload事件被記住IMG的屬性：

var images = []; //An array where images are stored. 

appendImg = function(inx, url, x, y, w, h) { 

    if (!images[inx]) { 
    var img = new Image(); 
    img.onload = function() 
    { 
     dg_context.drawImage(img, x, y, w, h); 
     images[img.index] = img; 
    } 
    img.index=inx; 
    img.src = url; 
    }else{ 
    var img = images[inx]; 
    console.log(img); 
    dg_context.drawImage(img, x, y, w, h); 
    } 
}