[聚合文章] Canvas绘制图片层级的小技巧

最近在策划一款狗年的H5，由于微信规定禁止诱导分享，但是又想要更好的传播效果，怎么办呢？最终选择了曲线救国，让最终的页面转换为图片带有H5的二维码，听上去很熟的套路吧，很多友商已经在用了，各家实现的方式也不一样，有用PHP实现的，也有用Canvas转image实现的，这里我们采用的是第二种。

第二种方法将压力全部转移到前端，Canvas中绘制图片我们会用到 img.onload = function(){}; 方法，但是多个图片绘制的时候会有层级问题，如果先绘制的图片过大就会把后面绘制的图片遮盖住，是我们不想看到的结果，而 img.onload 这种方法还有一个问题是谁的图片先加载完就先绘制谁，所以绘制顺序不好把控，听上去好心水的感觉，不过没关系，我们可以稍微调整下就可以让图片按照我们想要的顺序绘制，代码如下：

// 最后绘制的图片在最外面
resultBg.src = '../dogs/media/result.jpg';
resultBg.onload = function(){
    ctx.drawImage(resultBg, 0, 0, w, w*667/375);

    headResultImg.src = headUrl;
    headResultImg.onload = function(){
        ctx.drawImage(headResultImg, 0, 0, 200, 200);

        // 最先绘制的图片在最里面
        dogImg.src = dogUrl;
        dogImg.onload = function(){
            ctx.drawImage(dogImg, 100, 790, 400, 600);
        };
    };
};

按照最先绘制的图片在最里面，最后绘制的图片在最外面的原则就可以完美的把控多个图片的绘制层级问题了，怎么样，简单吧！