一,新版的canvas和旧版不同,需要增加type=2d,且初始化不一样

第一步是html中修改

<canvas canvas-id="myCanvas" />
<!-- 修改为以下 -->
<canvas id="myCanvas" type="2d" />

第二步是初始化变了

const context = wx.createCanvasContext('myCanvas')
//
// 修改为以下
//
wx.createSelectorQuery().select('#myCanvas') // 在 WXML 中填入的 id.node(({ node: canvas }) => {const context = canvas.getContext('2d')}).exec()

二,在popup弹窗中使用canvas绘制无效

当canvas重新渲染时，canvas中的内容全部都会被清空。 解决 popup弹出后，不要马上绘制，需要等待popup中的canvas渲染完成后，在调用canvas取绘制就好了！
这是因为新版的canvas绘制是同步的,而canvas的初始化又是异步的,这就导致popup弹窗我们用v-if来创建时,就会发生这个问题.
我的修改:

showCanvas(){this.imgShow=trueconst that=thisthat.$nextTick(()=>{// 使用 fabric 绑定画布wx.createSelectorQuery().select('#poster-canvas') // 在 WXML 中填入的 id.fields({ node: true, size: true }).exec((res) => {// Canvas 对象const canvasNode = res[0].node// 渲染上下文that.context = canvasNode.getContext('2d')const dpr = wx.getSystemInfoSync().pixelRatiocanvasNode.width = res[0].width * dprcanvasNode.height = res[0].height * dprthat.context.scale(dpr, dpr)that.context.clearRect(0, 0, that.context.canvas.width, that.context.canvas.height)const image = canvasNode.createImage()image.src = 'https://open.weixin.qq.com/zh_CN/htmledition/res/assets/res-design-download/icon64_wx_logo.png'image.onload = () => {console.log("图片加载完成",that.context)that.context.drawImage(image,0,0,150,100,)that.context.fillStyle="red"that.context.strokeStyle="blue"that.context.beginPath()that.context.moveTo(10,10)that.context.lineTo(60, 10)that.context.lineTo(60, 40)that.context.closePath()that.context.stroke()that.context.fill()// 这里绘制完成console.log('draw done')}})})},

也就是放置在nextTick中,等canvas初始化完成后再绘制即可.