微信小程序 新版canvas绘制图片方法

截至2022.12.23 修改日

微信小程序开发文档介绍不全，导致很多用户绘制图片不显示或失败，因此写下截至目前的可行方案

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

// canvas 标签中要使用id, 不要只用canvas-id,没有id,wx.createSelectorQuery().select('#myCanvas') 获取不到节点

wx.createSelectorQuery().select('#myCanvas')
  .fields({ node: true, size: true })
  .exec((res) => {
      let textCanvas = res[0].node;  // 重点1

      textCtx = textCanvas.getContext('2d');  // 重点2
 
      /**至此，textCanvas，textCtx已经成功获取到，下面代码为绘图测试代码可根据自己需要修改**/

      textCtx.clearRect(0,0,textCanvas.width,textCanvas.height)
      textCtx.beginPath();

      const bg = textCanvas.createImage();
      bg.src = 'https的网络图';
      bg.onload = () => {
            textCtx.drawImage(bg, 0, 0, textCanvas.width, textCanvas.height)
      }
})

如果新手不熟悉canvas，先看下小程序官方文档

可运行案例：

wxml:

<canvas type="2d" id="myCanvas" style="width: 750rpx;height: 200rpx;"></canvas>

js:

let textCtx;
Page({
  data: {

  },
  onLoad() {
    wx.createSelectorQuery().select('#myCanvas').fields({ node: true, size: true })
      .exec((res) => {
          let textCanvas = res[0].node  // 重点1

          textCtx = textCanvas.getContext('2d')  // 重点2
 
           /**至此，textCanvas，textCtx已经成功获取到，下面代码为绘图测试代码可根据自己需要修改**/

          textCtx.clearRect(0,0,textCanvas.width,textCanvas.height)
          textCtx.beginPath();

          const bg = textCanvas.createImage()
          bg.src = 'https://s1.ax1x.com/2022/06/13/XRfjoR.png'
          bg.onload = () => {
            textCtx.drawImage(bg, 0, 0, textCanvas.width, textCanvas.height)
          }
        })
  }

})