html部分，背景圖原始為552px *654px
這里有個(gè)坑，之前我沒有把寬高寫在行內(nèi)，寫在內(nèi)聯(lián)樣式里，導(dǎo)致背景圖根本就不準(zhǔn)，所以一定把寬高寫在行內(nèi)樣式里！??！

<main id="mask">
    <canvas id="myCanvas" width="276" height="327"></canvas>
</main>

JS部分

    function draw(applyNo) {
        var bg = {
            src: "https://static.19louimg.cn/ui/theme20/0211shengdu/jiaxing_poster.png"
        }
        var image = new Image();
        image.crossOrigin = "Anonymous";
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        //*******解決移動(dòng)端繪制出來(lái)海報(bào)模糊的問題START
        let dpr = window.devicePixelRatio; // 假設(shè)dpr為2
        // 根據(jù)dpr，擴(kuò)大canvas畫布的像素，使1個(gè)canvas像素和1個(gè)物理像素相等
        c.style.width = c.width + 'px';
        c.style.height = c.height + 'px';
        c.width = dpr * 276;
        c.height = dpr * 327;
        // 由于畫布擴(kuò)大，canvas的坐標(biāo)系也跟著擴(kuò)大，如果按照原先的坐標(biāo)系繪圖內(nèi)容會(huì)縮小
        // 所以需要將繪制比例放大
        ctx.scale(dpr, dpr);
        //********解決移動(dòng)端繪制出來(lái)海報(bào)模糊的問題END
        image.onload = function () {
            ctx.drawImage(image, 0, 0, 276, 327);
            ctx.font = "18px PingFangSC-Regular";
            ctx.fillStyle = '#24A193';
            ctx.fillText('親愛的' + username+'小朋友', 37, 90);
            //二維碼當(dāng)前頁(yè)地址 帶參數(shù)
            var code = `https://jiaxing.19lou.com/vote/web/newDetail/${surveyNo}/${applyNo}?fromContent=${searchInfo}`
            var m5 = $.md5(code);
            var p1 = m5.substr(0, 2)
            var p2 = m5.substr(2, 2)
            var qrUrl = 'http://att3.citysbs.com/qrcode/' + p1 + '/' + p2 + '/' + m5 + '.png?data=' + encodeURIComponent(code)
            var codeImg = new Image();
            codeImg.crossOrigin = 'anonymous';
            codeImg.onload = function () {
                ctx.save();//創(chuàng)建保存點(diǎn)
                ctx.drawImage(codeImg, 150, 185, 70, 70);
                ctx.restore();
                var src = c.toDataURL("image/png");//把路徑轉(zhuǎn)為base64
                const img1 = document.createElement('img');
                img1.src = src
                $("#mask").append(img1)
                img1.id = 'img1'
                img1.style.cssText = "width:276px;height:327px;position:absolute;left:50%;margin-left:-138px;opacity:1;z-index:99;top:2rem";
            }
            codeImg.src = qrUrl;
        }
        image.src = bg.src;
    }

這里有個(gè)坑，之前我把畫布生成的圖片，也就是img1的opacity值為0的時(shí)候，華為mate20、p20保存圖片竟然識(shí)別不到二維碼，改為1就好了。