图像数组不会绘制到 canvas

Question

我正在学习 JavaScript。如果有人能解释我哪里做错了就太好了。

我有一个包含图片 link 的数组，并将它们放入函数中，该函数应该为每张包含 link 的图片在 canvas 中绘制一个图像。

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 点

P.S.

loadImage 是用很少的图像 src 创建数组的函数:

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

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

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


        })
            draw(imgs)

    };

Answer 1

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

既然是给大家学习的例子，我就不说怎么优化了。

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

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
c.width = 400;
c.height = 400;
var images = [];
var links = ["http://pattersonrivervet.com.au/sites/default/files/pictures/Puppy-10-icon.png",
           "https://38.media.tumblr.com/avatar_2be52b9ba912_128.png"];
var counter = 0;

function draw(imgs){
    ctx.clearRect(0,0,c.width,c.height);
    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
        ctx.drawImage(src, 0, step);
        step += src.height;  // This is the step for the next picture. Let's use the height of the image.
    })
}

function loadImg(link){
    var img = new Image();
    img.src = link;
    images.push(img);
    draw(images);
};


var myInterval = setInterval(function(){ //I set the interval to a variable so that I can remove it later if needed.
    // you can add images in different ways, I used an array of links
    loadImg(links[counter]);
    
    counter++; //set counter to next image
    if (counter > links.length) {
        //if we're out of images, stop trying to add more
        clearInterval(myInterval); 
    }     
}, 3000);
ctx.fillText("pictures appear in 3s intervals",10,10);

<canvas id="canvas"></canvas>

图像数组不会绘制到 canvas

Image array won't draw to canvas

javascript

canvas

setinterval