微信小程序使用canvas绘制网络图片，使用canvas将图片变成圆形

1.HTML

<canvas   id="myCanvas" type="2d" canvas-id="myCanvas"  /> 

2.css隐藏 canvas 前两句是关键

#myCanvas {
  position:fixed;
  left:100%;
  /* visibility: hidden */
  /* visibility: hidden; */
   /* margin-top: 100rpx; */
margin: 68rpx auto;
width: 287px;
height: 450px;
/* line-height: 20px; */
background-color: rgba(255, 255, 255, 1);
text-align: center;
}

3.微信小程序使用canvas绘制网络图片

wx.createSelectorQuery()
            .select('#myCanvas') // 绘制的canvas的id
            .fields({
              node: true,
              size: true
            })
            .exec((res) => {
              const canvas = res[0].node
              // 渲染上下文
              const ctx = canvas.getContext('2d')
              // Canvas 画布的实际绘制宽高
              const width = res[0].width
              const height = res[0].height
              // 初始化画布大小
              const dpr = wx.getWindowInfo().pixelRatio

              //根据dpr调整
              // dpr  2 4
              //      3 6
              let   Ratio=dpr*2
              console.log("bug",dpr)
              canvas.width = width * dpr
              canvas.height = height * dpr
              //存储画布的实际大小
              this.setData({canvas:{...canvas}})
              ctx.scale(dpr, dpr)
              ctx.clearRect(0, 0, width, height)

              //背景图
              const back_image = canvas.createImage()
              // 图片加载完成回调
              back_image.onload = () => {
                // 将图片绘制到 canvas 上
                ctx.drawImage(back_image, 0, 0, canvas.width, canvas.height)
                ctx.fillStyle = 'black'
                ctx.font = 'normal bold 12px PingFangSC-regular';
                ctx.fillText(this.data.nickName, 80, 30); // ctx.fillText('微信昵称', 80, 30);
                ctx.font = 'normal 12px PingFangSC-regular';
                ctx.fillText('邀请你一起参加任务', 80, 52);
                // ctx.fillText('一起参与ta发布的任务吧~', 80, 70);

                //店铺名称
                ctx.font = 'normal bold 12px PingFangSC-regular';
                ctx.textAlign = "center";
                ctx.fillText(this.data.options.name, canvas.width/Ratio, 260); //canvas设置文字居中宽度为画布宽度的一半  
        

                //长按二维码
                ctx.font = '10px PingFangSC-regular';
                ctx.fillStyle = '#999999';
                ctx.fillText('长按识别查看任务', canvas.width/Ratio, 440);
              }
              back_image.src = '/public/img/back.jpg'; //背景图
              
              //用户图片
              const image = canvas.createImage()
              image.onload = () => {
                ctx.drawImage(image, 30, 18, 40, 40)
              }
              // image.src = '/public/img/wechar_1.png'
              console.log("展示",this.data.headimgUrl)  
              image.src=this.data.headimgUrl //app?.globalData?.wxUser.headimgUrl

              //商家图片
              const shopImage = canvas.createImage()
              shopImage.onload = () => {
                ctx.drawImage(shopImage, canvas.width/Ratio-230/2, 88,230,140)
              }
              shopImage.src =this.data.options.brandHeaderPic  //'/public/img/wechar_1.png'

              //二维码图片
               coderImage.src = this.data.options.shareQrcode  //'/public/img/cord.jpg';
              const coderImage = canvas.createImage()
              coderImage.onload = () => {
                ctx.drawImage(coderImage, canvas.width/Ratio-120/2 , 300, 120, 120)
              }
             

    
   // 绘制完成后存储路径
   
    setTimeout( ()=> {
      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width:  this.data.canvas.width,
        height: this.data.canvas.height,
        //  destWidth: this.data.canvas.width * 2,//生成图片的大小设置成canvas大小的二倍解决模糊
        //  destHeight: this.data.canvas.height* 2,
        //canvasId: 'myCanvas',
        canvas,
        success: (res)=> {
          var tempFilePath = res.tempFilePath;
          console.log("数据是",res)
         this.setData({
            imagePath: tempFilePath
          });
          // console.log("app变量",app)
          // wx.hideToast();
          console.log('canvas图片地址' + this.data.imagePath);
        }
      });
    }, 600);

            })
  

以上的写法 会造成某些图标无法绘制上去解决方法是在网络图片中不断嵌套先绘制大图片再绘制小图片的顺序

 //二维码图片
               coderImage.src = this.data.options.shareQrcode // 网络url地址
              const coderImage = canvas.createImage()
              coderImage.onload = () => {
                ctx.drawImage(coderImage, canvas.width/Ratio-120/2 , 300, 120, 120)
                
                // 嵌套下一次绘图
               shopImage.src =this.data.options.brandHeaderPic  
               const shopImage = canvas.createImage()
                 shopImage.onload = () => {
                ctx.drawImage(shopImage, canvas.width/Ratio-230/2, 88,230,140)
                  }
              

              }

网上说使用先下载到本地再使用img.src加载我尝试过还是不行

4.使用canvas将图片变成圆形

长用在海报需要将用户的头像画到canvas图片上如:

 wx.createSelectorQuery()
      .select('#myCanvas') // 在 WXML 中填入的 id
      .fields({
        node: true,
        size: true
      })
      .exec((res) => {
        const canvas = res[0].node
        // 渲染上下文
        const ctx = canvas.getContext('2d')
        //用户图片
              const image = canvas.createImage()
              image.src = this.data.headimgUrl //app?.globalData?.wxUser.headimgUrl
              image.onload = () => {
                ctx.arc(50, 38, 20, 0, 2 * Math.PI) // 将图片绘制到圆上
                ctx.fill(); //填充背景
                ctx.clip() 
                ctx.drawImage(image, 30, 18, 40, 40)
              }})

其原理就是在图片上面放一个圆