javascript - 从数组中绘制图像

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

您的问题是 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];
}

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