微信小程序wx.createCanvasContext废弃，使用wx.createOffscreenCanvas接口的绘制canvas 2d海报遇到的踩坑经验。-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序wx.createCanvasContext废弃，使用wx.createOffscreenCanvas接口的绘制canvas 2d海报遇到的踩坑经验。。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

在wxml页面写id，canvas-id已经没用了。然后像html一样，使用js获取这个canvas标签组件，在微信的js获取使用wx自带的方法。如下文章来源地址https://www.toymoban.com/news/detail-504188.html

wx.createSelectorQuery().select('#myCanvas').fields({ node: true, size: true }).exec((cres) => {

      //在这里可以下获取到canvas组件了，然后创建成画板画布。

        var rect = cres[0]

         console.log(rect)

         var textCanvas = rect.node  // 重点1

         var ctx = textCanvas.getContext('2d')  // 重点2//创建画布

         //这里踩坑1，我直接绘制，发现绘制的宽高和获取到的宽高总有出入，明明打印canvas的宽高和我设置的宽高一样，但是绘制在页面填充颜色，发现宽度小了很多。

        // 后面经过查了大量文献，发现原来需要根据手机的像素同比1：1化，代码如下

        const dpr = wx.getSystemInfoSync().pixelRatio

         textCanvas.width = rect.width * dpr

         textCanvas.height = rect.height * dpr

         ctx.scale(dpr, dpr)

         //然后下面就跟我们在html绘制一样，比如绘制文字

         ctx.font = `bold 18px serif`

         ctx.fillStyle = "#ff6800"

         ctx.fillText("文字"，10，10)

         //接下来是绘制图片了，这里踩坑2

         //1.踩坑2，绘制图片需要把图片变成画布再绘制，

        this.getImage("/assets/logo.png").then(image=>{

               ctx.drawImage(image, 10, 20, 38, 38)

        })

})

// 获取图片对象

  async getImage (url,width, height) {  

    const off = wx.createOffscreenCanvas({type:'2d'})

    const image = off.createImage()   

    await new Promise((resolve, reject)=>{      

      image.onload = resolve  // 绘制图片逻辑

      image.src = url

    })

    return image

  },

到了这里，关于微信小程序wx.createCanvasContext废弃，使用wx.createOffscreenCanvas接口的绘制canvas 2d海报遇到的踩坑经验。的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！