动态创建的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);
         }