canvas合并两张图片

Posted 2020-10-27 这个男人

　　　　　　　　

　　解析： 原理是一样的 
　　画多张图需要一张一张画 
　　也就是等图片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")
                    }
                }

            },