Question

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

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函数的上下文中是无效的吗？

由于

Answer 1

我会尝试以下代码：

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保存适当的值。

Answer 2

你的问题是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。

来自数组的drawImage

2 个答案: