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

版权声明:本文为博主原创文章,若要转载请申明出处与连接 https://blog.csdn.net/wxl1555/article/details/53916856

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

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

阅读更多
换一批

没有更多推荐了,返回首页