canvas按自己想要的层次关系依次画图片的方法（img.onload()）

利用canvas画图片时遇到的问题总结

画图片时会有一个方法

img.src = "图片的路径"
img.onload(function(){
    pen.drawImage(img,0,0);
});

上面这句话的意思是当图片加载完成后再执行函数里面的代码，

那么假如我们要在一个画布里面画很多个图片，而且图片有大有小，我们希望小的图片在大的图片的上面

那么我们应该这样写代码

        //按自己想要的叠加的次序，依次嵌套
        //最下面的图片先画
        img.src = "图片路径";
        img.onload = function(){
            pen.drawImage(img,0,0);
            //其次画中间的图片
            img1.src = "图片路径";
            img1.onload = function(){
                pen.drawImage(img1,100,0);
                //最后画最上面的图片
                img2.src = "图片路径";
                img2.onload = function(){
                    pen.drawImage(img2,200,0);
                }
            }           
        }

这样就按照我们想要的顺序画出来了