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); 
    } 
}