uniapp使用canvas开发微信小程序不要type=2d

585 阅读1分钟

uniapp使用canvas标签在标签属性里面加type=2d会出现 ctx.drawImage 绘制失效,ctx.draw 的绘制完成回调也不不触发。

以下是错误示范:

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

const ctx = uni.createCanvasContext('myCanvas')

uni.chooseImage({
  success: function(res){
    ctx.drawImage(res.tempFilePaths[0], 0, 0, 150, 100)
    ctx.draw(true,()=>{
        console.log("绘制完成!");
    })
  }
})

正确示范:

<canvas canvas-id="myCanvas" id="myCanvas"></canvas>

const ctx = uni.createCanvasContext('myCanvas')

uni.chooseImage({
  success: function(res){
    ctx.drawImage(res.tempFilePaths[0], 0, 0, 150, 100)
    ctx.draw(true,()=>{
        console.log("绘制完成!");
    })
  }
})

总结:开发微信小程序千万不要在canvas的属性里加type=2d,我因为不小加了,弄了两天再找到原因 (ㄒoㄒ)~~