drawImage from an array

drawImage from an array

本文关键字：array an from drawImage      更新时间：2023-09-26

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

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

感谢

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

我会尝试以下代码：

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包含适当的值。

相关文章：