函数范围外的图像引用问题

时间:2013-12-02 21:12:41

标签: javascript html5 image html5-canvas yail

我的图像加载了YAIL并且它完美地工作但是我需要“药丸”图像可以拖动我需要药丸图像是可参考的我已经尝试通过将药丸声明为外部的变量来做到这一点done()函数的范围,但这不起作用。我到目前为止:

var currentdate = new Date();
var datetime = currentdate.getHours();
var loader = new YAIL(done, progress, errors);
var pill = new Image();
if(datetime==1||datetime==13){
loader.add("clock/clock1.png");
loader.add("clock/pill.png");
}
else if(datetime==2||datetime==14){
loader.add("clock/clock2.png");
loader.add("clock/pill.png");
}
else if(datetime==3||datetime==15){
loader.add("clock/clock3.png");
loader.add("clock/pill.png");
}
else if(datetime==4||datetime==16){
loader.add("clock/clock4.png");
loader.add("clock/pill.png");
}
else if(datetime==5||datetime==17){
loader.add("clock/clock5.png");
loader.add("clock/pill.png");
}
else if(datetime==6||datetime==18){
loader.add("clock/clock6.png");
loader.add("clock/pill.png");
}
else if(datetime==7||datetime==19){
loader.add("clock/clock7.png");
loader.add("clock/pill.png");
}
else if(datetime==8||datetime==20){
loader.add("clock/clock8.png");
loader.add("clock/pill.png");
}
else if(datetime==9||datetime==21){
loader.add("clock/clock9.png");
loader.add("clock/pill.png");
}
else if(datetime==10||datetime==22){
loader.add("clock/clock10.png");
loader.add("clock/pill.png");
}
else if(datetime==11||datetime==23){
loader.add("clock/clock11.png");
loader.add("clock/pill.png");
}
else if(datetime==0||datetime==12){
loader.add("clock/clock12.png");
loader.add("clock/pill.png");
}


loader.load();
function done(e) { 
    var imageLst = e.images;
    canvas.ctx.drawImage(imageLst[0], 400, 180);
    canvas.ctx.drawImage(imageLst[1], 580, 350, 30,30);
    redpill=imageLst[1];

}

1 个答案:

答案 0 :(得分:0)

这不是YAIL的问题,而是声明变量的地方。

如果要在其他函数中访问变量,则需要将变量放在函数作用域之外(与任何函数一样):

var imageLst;  /// declare here

function done(e) { 
    imageLst = e.images;  /// set here, images are now available outside done()

    canvas.ctx.drawImage(imageLst[0], 400, 180);
    canvas.ctx.drawImage(imageLst[1], 580, 350, 30,30);
    redpill=imageLst[1];
}

注意:imageLst现在可用于子功能。如果您需要从任何函数访问,您需要确保在全局范围内声明imageLst

注2:即使变量在函数范围之外可用,也不会在完成之前实际设置。因此,与任何异步操作一样,您需要在done处理程序中调用解决方案中的下一步:

function done(e) {
    /// now the variable is set
    imageLst = e.images;

    /// go to next step in solution
    myNextStep();
}