一,新版的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=true
const that=this
that.$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().pixelRatio
canvasNode.width = res[0].width * dpr
canvasNode.height = res[0].height * dpr
that.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初始化完成后再绘制即可.
