canvas合並兩張圖片

　　　　　　　　

　　解析： 原理是一樣的 
　　畫多張圖需要一張一張畫 
　　也就是等圖片onload成功后處理
　　這里代碼寫的比較隨意 
　　實際用的時候可以小粉轉一下 也非常簡單。我懶~~
　　么么、、
　　

　　　　　　newImage(text) {
                // 生成圖片
                var imageBox = document.getElementById("newimage")
                var canvas = document.getElementById("canvas")
                var cxt = canvas.getContext("2d")
                var img = new Image()
                img.src = require(`assets/img/activity/newyear/${1}.jpg`)
                // 圖片加載完成，才可處理
                img.onload = () => {
                    // 畫圖(這里畫布與圖片等寬高)
                    cxt.drawImage(img, 0, 0)
                    // 設置字體大小
                    cxt.font = "28px Microsoft YaHei"
                    // 更改字號后，必須重置對齊方式，否則居中麻煩。設置文本的垂直對齊方式
                    cxt.textBaseline = 'middle'
                    cxt.textAlign = 'center'
                    // 距離左邊的位置
                    var left = canvas.width / 2
                    // 距離上邊的位置 (圖片高-文字距離圖片底部的距離)
                    var top = canvas.height - 328
                    // 文字顏色
                    cxt.fillStyle = "#000"
                    // 文字在畫布的位置
                    cxt.fillText(text, left, top)
                    // 畫第二張圖  
                    draw()
                }

                function draw() {
                    var img2 = new Image()
                    img2.src = 'require(`assets/img/activity/qm/button.png`)'
                    img2.onload = () => {
                        cxt.drawImage(img2, 180, 80)
                        imageBox.src = canvas.toDataURL("image/jpg")
                    }
                }

            },