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

我遵循j08691给出的canvas代码

它工作得很好，我尝试了五个画布元素，但在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];
}

});

var icon=新数组（“icon1”、“icon2”、“icon3”、“icon4”、“icon5”）；
var c=新数组（）；
var ctx=新阵列（5）；
var img=新阵列（5）；
var imgsrc=新数组（“imgsrc1”、“imgsrc2”、“imgsrc3”、“imgsrc4”、“imgsrc5”）；
$（文档）.ready（函数（）
{
var i=0；
对于（i=0；i，在onload处理程序中，ctx[i]和img[i]超出范围

然而，img[[i]可以通过该函数访问，但是您应该将ctx[i]作为onload处理程序的参数传递

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

@Nickolay和@apsillers的解释都是正确的，但它们的代码不起作用，因为它们重新定义了一个从未赋值的
i
/
ctxi
参数。请改用以下代码：

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

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