h5绘制canvas合成图，此例为vue合成带分享二维码的海报

直接拿去用就是

html

生成二维码

canvas合成图

js源码：

canvas+api自己可以去了解：https://www.w3school.com.cn/tags/html_ref_canvas.asp

// 生成二维码

mounted() {

var url = window.location.href.substring(0,window.location.href.indexOf('#')+1)+'register?code='+this.inviteCode;

// 生成二维码

var qrcode = new QRCode(this.$refs.qrCodeUrl, {

text: url,

width: 103,

height: 103,

colorDark: "#000000",

colorLight : '#ffffff',

correctLevel: QRCode.CorrectLevel.H,

});

qrcode.clear(); // clear the code.

qrcode.makeCode(url);

var that = this;

setTimeout(function(){

var nodes = that.$refs.qrCodeUrl.childNodes[1];

// console.log(nodes);

that.bg2 = nodes.src;

that.createdPost();

},200)

}

// 合成图片

createdPost() {

this.$toast({

type: 'loading',

})

var that = this;

    var bg = {

        width: 750,

        height: 1334,

        src: this.bg1

    }

    var code = {

        width: 120,

        height: 120,

        src: this.bg2

    }

    var image = new Image();

    var image1 = new Image();

    image.src = bg.src;

    image1.src = code.src;

    var c = document.getElementById("myCanvas");

    var ctx = c.getContext("2d");

    image.onload = function() {

        ctx.drawImage(image, 0, 0, bg.width, bg.height);

    ctx.fillStyle = "#fff";

    ctx.fillRect(100,1110,130,130);

        ctx.drawImage(image1, 105, 1115, code.width, code.height);

        // ctx.save();  // 保存目前Canvas的状态，将目前Canvas的状态推到绘图堆栈中

        // ctx.arc(185, 1235, 65, 0, Math.PI * 2, false);

        // ctx.clip();

        // ctx.restore(); // 还原状态，从绘图堆栈中弹出上一个Canvas的状态

        ctx.font = "30px Arial";

        ctx.fillStyle = '#ffffff';

        ctx.font = "26px Arial";

        ctx.fontWeight = 'bold';

        ctx.fillText('扫码立即加入', 250, 1155,175);

        ctx.fillText('“”', 250, 1205,180);

        ctx.font = "26px Arial";

        ctx.fillText('邀请码', 510, 1155,150);

        ctx.font = "26px Arial";

        ctx.fillText(that.inviteCode, 510, 1205,150);

        ctx.beginPath();

        ctx.moveTo(470, 1130);

        ctx.lineWidth = 2;

        ctx.strokeStyle = "#fff";

        ctx.lineTo(470, 1220);

        ctx.stroke();

    // 转为图片png

    html2canvas(that.$refs.poster,{

        backgroundColor: null

    }).then((canvas) => {

        that.$toast.clear();

        let poster = c.toDataURL("image/png");

        that.poster = poster;

    });

    }

},