使用 canvas 拼接文字和图片

在拼接的过程中先执行的代码层级就较低，后拼接的图片层级较高，可以覆盖在之前拼接的图上面，设置单个文字的样式也一样，写在后面
举例：

function hecheng() {
            var c=document.getElementById("myCanvas");
            var imgSrc = $("#qrcode img").attr("src");// 二维码src
            var bgimgSrc=$("#headimg img").attr("src");
            var ctx=c.getContext("2d");
            var bgimg = new Image();
            bgimg.onload = function(){
                ctx.drawImage(bgimg, 47.5, 180, 270, 270);
                var img=new Image();
                img.setAttribute('crossOrigin','anonymous');
                img.onload=function(){
                    percent = 100;
                    ctx.drawImage(img,0,0,375,667);
                    var wuhanjiay=new Image();
                    // wuhanjiay.setAttribute('crossOrigin','anonymous');
                    wuhanjiay.onload=function(){
                        percent = 80;
                        ctx.drawImage(wuhanjiay,20,73,335,100);
                            var img_logo=new Image();
                            img_logo.onload=function(){
                                percent = 60;
                                ctx.drawImage(img_logo, 20, 616, 80, 28)
                                var img_qr=new Image();
                                img_qr.onload=function(){
                                    percent = 40;
                                    ctx.drawImage(img_qr, 280, 530, 80, 80);
                                        percent = 20;
                                        percent = 10;
                                        var p1 = $('.text .p1').text();
                                        var p2 = $('.text .p2').text();
                                        var p3 = $('.text .p3').text();
                                        var p4 = $('.text .p4').text();
                                        var p5 = $('.text .p5').text();
                                        var p6 = $('.text .p6').text();
                                        var p7 = $('.text .p7').text();
                                        var p8 = $('.text .p8').text();
                                        var str1 = p1;
                                        var str2 = p2;
                                        var str3 = p3;
                                        var str4 = p4;
                                        var str5 = p5;
                                        var str6 = p6;
                                        var str7 = p7;
                                        var str8 = p8;
                                        ctx.font="12px SimSun";
                                        ctx.fillStyle  = '#fff';
                                        // ctx.textAlign="left";
                                        ctx.fillText(str4,20,450);
                                        ctx.fillText(str5,20,470);
                                        ctx.fillText(str6,20,490);
                                        ctx.fillText(str7,20,510);
                                        ctx.fillText(str8,20,530);
                                        str9 = "足不出户就让灵魂远游！"
                                        str10 = "扫码接力"
                                        str11 = "领免费听书VIP"
                                        ctx.fillText(str9,124,636,154);
                                        ctx.fillStyle  = '#fff';
                                            ctx.font="14px SimSun";
                                        ctx.fillText(str2,20,400);
                                                                                ctx.fillText(str1,20,380);
                                                                                ctx.fillText(str3,20,420);
                                            ctx.font="10px SimSun";
                                                                                ctx.fillText(str10,292,631);
                                                                                ctx.fillText(str11,281,650);
                                        var t1 = window.setTimeout(function(){
                                         percent = 0;
                                         console.log(percent);
                                         clearTimeout(t1);//去掉定时器
                                        },500);//使用字符串执行方法
                                }
                                img_qr.src=imgSrc;
                            }
                            img_logo.src="assets/image/jjlelogo2x.png"
                    };
                    wuhanjiay.src="assets/image/text2x.png"
                }
                img.src="assets/image/bg.png";
                img.onerror=function(){};
            }
            bgimg.src=bgimgSrc
        }