微信小程序新版canvas绘制图片方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序新版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:文章来源地址https://www.toymoban.com/news/detail-517987.html

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)
          }
        })
  }

})

到了这里，关于微信小程序新版canvas绘制图片方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！