使用uniapp的canvas绘制页面海报

都是canvas的简单应用，
其中有一个需求没有完成-->让把头像的图片处理成马赛克的样式，我没做出来，后来用色块给遮挡起来了
希望有会这方面内容的大哥看到的话，指点指点~~

//绘制海报
      drawPicture(){
        
        let ewmUrl = `业务需求`
        //生成二维码
        qrcode.toDataURL(ewmUrl, {
          type: "image/png", //类型
          quality: 0.5, //图片质量A Number between 0 and 1
          width: 130, //高度
          height: 130, //宽度
          errorCorrectionLevel: "L", //容错率
          margin: 1, //外边距
          color: {
            dark: "#000", //前景色
            light: "#fff" //背景色
          }
        }).then(imgData => {
          this.baseCode = imgData
        })

        //画布
        let ctx = uni.createCanvasContext('myCanvas', this);
        //画布宽高
        let imgW = this.$refs.draw_page.offsetWidth;
        let imgH = this.$refs.draw_page.offsetHeight;
        this.cwidth = imgW * 0.9;
        this.cheight = imgH + 125;

        //画布背景色
        ctx.fillStyle='#fff';
        ctx.fillRect(0, 0, this.cwidth, this.cheight);

        //图片
        let imgUrl = this.getSexDefaultImg
        // 获取图片信息, 要按照原图来绘制, 否则图片会变形
        uni.getImageInfo({
          src: imgUrl,
          success: info => {

            //绘制顶部背景图logoImg
            ctx.drawImage(this.logoImg, 0, 0, this.cwidth, 80)
            //绘制头像
            ctx.drawImage(info.path, this.cwidth/2 - 35, 45, 70, 70)

            //密封头像(做马赛克，没做出来)
            ctx.beginPath()
            ctx.fillStyle = 'rgba(242, 176, 53, 1)'
            ctx.setStrokeStyle('#fff')
            ctx.arc(this.cwidth/2, 80, 35, 0, Math.PI * 2)
            ctx.fill()
            
            //绘制密封文字
            ctx.font = '16rpx Medium'            // 字体大小
            ctx.fillStyle = '#fff'            // 字体填充颜色
            ctx.fillText('密', this.cwidth/2 - 8, 85)


            //绘制个人信息---名字
            ctx.font = "18rpx Medium" // 字体大小
            ctx.fillStyle = '#212121' //字体填充颜色
            let name_position = this.cwidth/2 - this.jlUserInfo.name.length/2 * 16
            let str = this.jlUserInfo.name.split('').map((item) => {
              return '*'
            })
            let _name = str.join('')
            ctx.fillText(_name, name_position + (this.jlUserInfo.name.length * 3), 150);
            //绘制年纪...
            ctx.font = '12rpx Medium'            // 字体大小
            ctx.fillStyle = '#212121'            // 字体填充颜色
            let age_position = this.cwidth/6 - this.jlUserInfo.age.length/2 * 12
            ctx.fillText(this.jlUserInfo.age, age_position, 180)
            //绘制竖线
            ctx.font = '12rpx Medium'            // 字体大小
            ctx.fillStyle = '#212121'            // 字体填充颜色
            ctx.fillText('|', this.cwidth/3, 180)
            //绘制经验...
            ctx.font = '12rpx Medium'            // 字体大小
            ctx.fillStyle = '#212121'            // 字体填充颜色
            let ex_info = this.jlUserInfo.experienceYear == '无经验'? '暂无': this.jlUserInfo.experienceYear
            let ex_position = this.cwidth/2 - ex_info.length/2 * 12
            ctx.fillText(ex_info, ex_position + 3, 180)
            //绘制竖线
            ctx.font = '12rpx Medium'            // 字体大小
            ctx.fillStyle = '#212121'            // 字体填充颜色
            ctx.fillText('|', this.cwidth/3*2 - 12, 180)
            //绘制学历...
            ctx.font = '12rpx Medium'            // 字体大小
            ctx.fillStyle = '#212121'            // 字体填充颜色
            let edu_position = this.cwidth/3*2 + this.cwidth/6 - this.jlUserInfo.educationTypeName.length/2 * 12
            ctx.fillText(this.jlUserInfo.educationTypeName, edu_position, 180)

            //绘制分隔色块
            ctx.fillStyle='#faf8f5';
            ctx.fillRect(0, 200, this.cwidth, 10);

            //绘制求职意向
            ctx.font = '17rpx Medium'            // 字体大小
            ctx.fillStyle = '#000'            // 字体填充颜色
            ctx.fillText('求职意向', 20, 240)
            //期望职位
            ctx.font = '14rpx Medium'            // 字体大小
            ctx.fillStyle = '#757575'            // 字体填充颜色
            ctx.fillText(`期望职位：${this.qzyxData.jobPositionThirdName ? this.qzyxData.jobPositionThirdName : ''}`, 20, 270)
            //期望地区
            ctx.font = '14rpx Medium'            // 字体大小
            ctx.fillStyle = '#757575'            // 字体填充颜色
            let city = this.likeCity
            if(city.length > 16){ //判断长度
              city = city.substring(0,17) + '...'
            }
            ctx.fillText(`期望地区：${city}`, 20, 290)
            //期望薪资
            ctx.font = '14rpx Medium'            // 字体大小
            ctx.fillStyle = '#757575'            // 字体填充颜色
            let price = `${this.qzyxData.salaryMin}-${this.qzyxData.salaryMax}K`
            if(!this.qzyxData.salaryMin ){  //判断显示方式
              price = ''
            }
            ctx.fillText(`期望薪资：${price}`, 20, 310)
            //求职状态
            ctx.font = '14rpx Medium'            // 字体大小
            ctx.fillStyle = '#757575'            // 字体填充颜色
            let job_status = this.stateTypeNameList[this.indexVal] ? this.stateTypeNameList[this.indexVal] : ''
            if(!this.qzyxData.salaryMin ){  //判断显示方式
              price = ''
            }
            ctx.fillText(`求职状态：${job_status}`, 20, 330)

            //绘制分隔色块
            ctx.fillStyle='#faf8f5';
            ctx.fillRect(0, 350, this.cwidth, 10);

            //开始绘制二维码区域
            //左侧引导文字
            ctx.font = '14rpx Medium'            // 字体大小
            ctx.fillStyle = '#000'            // 字体填充颜色
            ctx.fillText('啦啦啦啦', this.cwidth/3 - 49, 400)
            ctx.font = '14rpx Medium'            // 字体大小
            ctx.fillStyle = '#000'            // 字体填充颜色
            ctx.fillText('【长按识别二维码】', this.cwidth/3 - 67, 420)
            ctx.font = '14rpx Medium'            // 字体大小
            ctx.fillStyle = '#757575'            // 字体填充颜色
            ctx.fillText('获取更多信息，进一步沟通', this.cwidth/3 - 84, 440)

            //绘制右侧二维码 
            ctx.drawImage(this.baseCode, this.cwidth/3*2, 370, 100, 100)

          }
        })
        setTimeout(() => {        // uni-app必须加上延迟，不然显示不出来， 亲测 
          ctx.stroke();
          let that = this
          ctx.draw(true,(ret)=>{  //必须加上  uniapp 没这儿玩意儿 显示不出来不比原生  不加可以显示
                        uni.canvasToTempFilePath({ // 保存canvas为图片
                            canvasId: 'myCanvas',
                            quality: 1,
                            complete(res) {
                that.pictureUrl    = res.tempFilePath    
                                // uni.setStorageSync('filePath',res.tempFilePath)  //保存临时文件路径到缓存
                            }
                        })
                    });
          
        }, 100)
        this.pictureOk = true
      },