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); } } }

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

相关资源：Canvas可拖动人物关系图代码.zip