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")

                    }

                }

            },