无法对五个画布元素执行相同的效果

Question

我遵循由j08691 here给出的代码。

它工作完美，我尝试了五个画布元素，但由于我是JavaScript初学者，所以请帮助我，但在JavaScript中出错。

var icon =new Array("icon1","icon2","icon3","icon4","icon5"); 
var c = new Array(); 
var ctx = new Array(5); 
var img = new Array(5); 
var imgsrc = new Array("imgsrc1","imgsrc2","imgsrc3","imgsrc4","imgsrc5"); 

$(document).ready(function() 
{ 

var i=0; 

for (i=0;i<5;i++) 
{ 
c[i]=document.getElementById(icon[i]); 
ctx[i]=c[i].getContext("2d"); 
ctx[i].shadowOffsetX = 12; 
ctx[i].shadowOffsetY = 4; 
ctx[i].shadowBlur = 5; 
ctx[i].shadowColor = '#666'; 
img[i] = new Image(); 
img[i].onload = function(i){ 
ctx[i].drawImage(img[i], 0, 0); //getting error here as "ctx[i] undefined" 
}; 
img[i].src =imgsrc[i]; 
} 

}); 

HTML

<canvas id="icon1" width="185" height="130" > 
    <canvas id="icon2" width="185" height="130" > 
    <canvas id="icon3" width="185" height="130" > 
    <canvas id="icon4" width="185" height="130" > 
    <canvas id="icon5" width="185" height="130" > 

Answer 1

@Nickolay的解释和@apsillers都是正确的，但他们的代码不工作，因为它们重新定义了从未分配的参数i/ctxi。改为使用以下内容：

function getHandler(i) { 
    return function() { 
     ctx[i].drawImage(img[i], 0, 0); 
    }; 
} 
img[i].onload = getHandler(i); 

Answer 2

的CTX [i]和IMG [I]是出在onload处理范围。

IMG [我]不过是通过访问这一点，但你应该通过CTX [I]作为onload处理的参数

 img[i].onload = function(ctxi) { 
      return function(ctxi) { 
       ctxi.drawImage(this, 0, 0); 
      } 
     }(ctx[i]);