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發(fā)布的任務吧~', 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)
              }})

其原理就是在圖片上面放一個圓文章來源地址http://www.zghlxwxcb.cn/news/detail-549798.html

到了這里，關于微信小程序使用canvas繪制網絡圖片，使用canvas將圖片變成圓形的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！