Javascript 图像阵列赢得'；不要画到画布上

我正在学习JavaScript。如果有人能解释一下我在哪里犯了错，那就太好了

我有一个带有图片链接的数组，并将它们放入函数中，该函数应该为每个带有链接的图片在画布中绘制一幅图像

function draw(imgs){

    var step = 0;  // I want to start with zero;

    imgs.forEach(function(src){   // then go through the array links

    // and I want to draw the images from the array

    con.drawImage(src, 0, step, 200 , 150)

        step += 20;  // This is the step for the next picture

    console.log(step)
    console.log(src)
    })

    console.log(imgs);
}

然后执行：

window.onload = function(){
    setInterval(function(){
      loadImg(arr, draw)    
    }, 1000)
...

它向我显示数组的第一张图片，在

setInterval

之后显示最后一张图片

抱歉描述不好，现在是凌晨5点

附言

loadImage是一个函数，用于创建包含少量src图像的数组：

function loadImg(linkArr, draw){
    var imgs = [];

        linkArr.forEach(function(link){
            var img = new Image();

            img.src = link
            imgs.push(img);


        })
            draw(imgs)

    };

---

很难说你到底在哪里犯了错。在第一次调用loadImg时，似乎所有图像都是在同一时间添加的。为了让您的示例延迟绘制图像，您需要延迟将实际源添加到数组中，因此每个间隔只发送1个URL

因为这是一个供您学习的示例，所以我将不讨论如何优化它

请参阅下面的代码，下面是一个您想要完成的工作示例。看看评论，希望你能看到发生了什么

var c=document.getElementById（“画布”）；
var ctx=c.getContext（“2d”）；
c、 宽度=400；
c、 高度=400；
var图像=[]；
变量链接=[”http://pattersonrivervet.com.au/sites/default/files/pictures/Puppy-10-icon.png",
"https://38.media.tumblr.com/avatar_2be52b9ba912_128.png"];
var计数器=0；
功能图（imgs）{
ctx.clearRect（0,0，c.宽度，c.高度）；
var step=0；//我想从零开始；
forEach（函数（src）{//然后遍历数组链接
//我想从阵列中绘制图像
ctx.drawImage（src，0，step）；
step+=src.height；//这是下一张图片的步骤。让我们使用图像的高度。
})
}
函数加载img（链接）{
var img=新图像（）；
img.src=链接；
图像推送（img）；
绘画（图像）；
};
var myInterval=setInterval（function（）{//我将间隔设置为一个变量，以便在以后需要时删除它。
//你可以用不同的方式添加图片，我使用了一系列链接
loadImg（链接[计数器]）；
计数器+++；//将计数器设置为下一个图像
如果（计数器>链接.长度）{
//如果没有图像，请停止尝试添加更多
clearInterval（myInterval）；
}     
}, 3000);
ctx.fillText（“图片以3s的间隔出现”，10,10）
您正在调用的loadImg（）是什么？您忘了向我们展示
draw
函数，该函数可能比
draw（img）
函数更有用。另外：您能解释一下为什么每1000毫秒使用一个设置间隔来做什么吗？在画布上一遍又一遍地画相同的图像？这不奇怪吗？或者好好睡一觉，明天再解释你到底在干什么。对不起，我已经添加了对该功能的描述，它只是创建一个带有图片的数组“为什么你要每1000毫秒使用一个设置间隔来做什么”-我不知道：）这只是为了学习和实验，我认为它会延迟绘制每一幅新图像