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

原创已于 2025-06-16 11:51:06 修改 · 1.7w 阅读

50 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序

于 2022-02-22 14:30:49 首次发布

微信小程序专栏收录该内容

5 篇文章

订阅专栏

截至2025.06.16，因微信小程序开发文档介绍不全，很多用户绘制图片不显示或失败。本文给出截至目前的可行方案，还提醒新手若不熟悉canvas，可先查看小程序官方文档，同时给出了可运行案例。

截至2025.06.16 修改日可用

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

<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 = '替换自己的网络图链接'
          bg.onload = () => {
            textCtx.drawImage(bg, 0, 0, textCanvas.width, textCanvas.height)
          }
        })
  }

})