Canvas等待所有圖片加載完成才開始繪圖

最近，用canvas畫了很簡單的一張圖，里面只有文字和圖片，繪制完成后把canvas轉化成一張圖片，用戶可以下載到自己的手機上

遇到的問題：圖片加載的時候會延遲繪圖的過程，導致后面那張大背景圖片繪畫的時間比別的圖片的時間長一點，遮蓋其他的圖片或者文字

先上圖看看效果：

解決辦法也很簡單，就是把所有的圖片先加載出來以后，再按照順序依次繪圖，直接看代碼

備注：本代碼使用vue寫的，繪制圖片的時候圖片路徑要用網絡鏈接或者base64

先在dom中寫個canvas

<canvas ref="canvaShare" width="414" height="1040"></canvas>

 下面是代碼邏輯

draw () {
    const that = this
    const canvas = this.$refs.canvaShare
    const ctx = canvas.getContext('2d')
    // 繪制
    this.renderImage(ctx)
    // 把canvas轉化成圖片
    setTimeout(function() {
        that.convertCanvasToImage(canvas)
    }, 500)
},

renderImage (ctx) {
    const that = this
    // 這里使用promise.all(),不懂得可以百度一下，傳入的是一個promise數組隊列，這里就是加載完成的圖片
    // 這個地方可以有更優雅的寫法
    Promise.all([
            this.loadImage(imgSrc.bg_url),
            this.loadImage(imgSrc.header_url),
            this.loadImage(imgSrc.waitness_url),
            this.loadImage(imgSrc.tyj_url),
            this.loadImage(imgSrc.dot_url),
            this.loadImage(imgSrc.saoma_url),
            this.loadImage(imgSrc.avatar_url),
        ]).then((imgs)=>{
        // imgs就是圖片隊列
        // 按照順序依次繪制圖片
        ctx.drawImage(imgs[0], 0, 0, 414, 1040);
        ctx.drawImage(imgs[1], 93, 26, 239, 16);
        ctx.drawImage(imgs[2], 84, 144, 258, 198)
        ctx.drawImage(imgs[3], 150, 470, 115, 26)
        ctx.drawImage(imgs[4], 145, 524, 120, 115)
        ctx.drawImage(imgs[5], 140, 790, 134, 177)
        that.drawAvatar(ctx, imgs[6], 154, 532, 100)

        ctx.fillStyle = '#ffffff';
        ctx.font = "24px AlibabaPuHuiTiB";
        // userinfo.nickName 換綁定的用戶信息
        ctx.fillText("朽木白", 171, 680);

        ctx.fillStyle = 'rgba(255,255,255,0.6)';
        ctx.font = "15px AlibabaPuHuiTiB";
        ctx.fillText("回復“解決方案”獲取媒體大腦優惠碼", 82, 1000);
        
    })
},
// 預加載圖片，最后返回一個promise對象
loadImage(url) {
    return new Promise((resolve)=>{
        const img = new Image();
        img.onload = ()=>resolve(img);
        img.src = url;
    })
},
// 繪制用戶頭像（圓形）
drawAvatar (ctx, src, x, y, w) {
    //cavas 圖片地址 位置x 位置y w寬高
    const r = w / 2 
    ctx.save()
    ctx.arc(x + r, y + r, r, 0, 2 * Math.PI, false)
    ctx.clip()
    ctx.drawImage(src, x, y, w, w)
    ctx.restore()
},
// 將canvas轉化成image，才可以進行下載，必須等canvas繪制完成
convertCanvasToImage(canvas) {
    var image = new Image();
    image.src = canvas.toDataURL("image/png");
    this.img = image.src
}

知識點：canvas，promise.all(),將canvas轉化成一張圖片