1

我试图在这样的循环中从数组中绘制图像：

var frames = [];
for(var i=0;i<assets.length;i++){
    frames[i] = new Image();
    frames[i].onload = function() {
        ctx.drawImage(frames[i],10,10);         
    };
frames[i].src = assets[i];

并得到错误：

值无法转换为以下任何一种：HTMLImageElement、HTMLCanvasElement、HTMLVideoElement。

我似乎将“frames [i]”传递给drawImage（）的方式导致了问题。为什么会这样，正确的方法是什么？变量“i”在调用 onload 函数的上下文中是否无效？

谢谢

4

2 回答 2

0

我会尝试以下代码：

var frames = [];
for (var i=0; i<assets.length; i++)
{
    frames[i] = new Image();
    frames[i].addEventListener(load, onImageLoaded, false);
    frames[i].src = assets[i];
}
function onImageLoaded(e)
{
    ctx.drawImage(this, 10, 10);
}

理由是您不需要维护变量i，而且它使代码更易于阅读。由于 onImageLoaded 处理函数是以这种方式附加的，因此每次调用它时，该this变量都将保存等同于 的内容frames[i]，其中i保存适当的值。

于 2013-08-28T15:52:05.620 回答
0

你的问题是onload回调是异步的，所以当回调函数被调用时，循环可能已经结束，i变量不再定义。无论如何，this关键字指向回调中的图像：

var frames = [];
for (var i=0; i<assets.length; i++) {
    frames[i] = new Image();
    frames[i].onload = function() {
        ctx.drawImage(this, 10, 10);         
    };
    frames[i].src = assets[i];
}

您可能会遇到的下一个问题是您无法控制在画布上绘制图像的顺序。看到这个JsFiddle。

于 2013-08-28T15:59:15.103 回答