动态创建的canvas上画图像不显示

Question

我创建了几个canvas，在canvas里又创建了img,然后想让图像画在canvas上，但是只有最有一个显示了。看控制台的时候img标签里是有图片的。for (n = 0; n<8; n++){        //在页面中创建canvas        var oCan = document.createElement('canvas');        $("#div1").append(oCan);        var context=oCan.getContext("2d");        oCan.innerHTML = '<img src="'+ imgSrc[n]+ '" alt=""/>';        //imgSrc为一个图片src的数组。        //添加图片        var image = new Image();        image.src = imgSrc[n];        console.log(image);        image.onload = function () {            var imgHeight = this.height;            var imgWidth = this.width;            imgWidth=oCan.width;            imgHeight=oCan.height;            context.drawImage(image, 0, 0,imgWidth,imgHeight);            var imageData =context.getImageData(0, 0, imgWidth, imgHeight);            console.log(imageData.data);         }       最后显示出来的只有最后一张图片，请问应该怎么改才能全部显示出来？

Answer 1

看注释

for (n = 0; n<8; n++){

        //在页面中创建canvas

        var oCan = document.createElement('canvas');

        $("#div1").append(oCan);

        var context=oCan.getContext("2d");

        oCan.innerHTML = '<img src="'+ imgSrc[n]+ '" alt=""/>'; //这里是干什么用？？？？

        //imgSrc为一个图片src的数组。

        //添加图片

        var image = new Image();

        image.src = imgSrc[n];

        console.log(image);

        image.onload = function () {

            var imgHeight = this.height;

            var imgWidth = this.width;

            imgWidth=oCan.width;

            imgHeight=oCan.height;

            context.drawImage(image, 0, 0,imgWidth,imgHeight); //你把图片始终画在0,0位置，所有图片全覆盖在一起了

            var imageData =context.getImageData(0, 0, imgWidth, imgHeight);

            console.log(imageData.data);

         }