微信小程序刮刮卡效果

qq_43320744

已于 2022-03-08 09:49:42 修改

阅读量1.1k

点赞数

文章标签：微信小程序 javascript css

于 2022-03-08 09:40:10 首次发布

本文链接：https://blog.csdn.net/qq_43320744/article/details/123334002

版权

<canvas canvas-id="canvas" bindtouchmove="onTouchMove" />

data: {
  canvasWidth: 310,
  canvasHeight: 136,
},
async onReady() {
  const canvas = wx.createCanvasContext('canvas')
  // 图片路径换成本地的格式
  const { path } = await wx.getImageInfo({ src: url })
  // 将画布背景覆盖在盒子上面
  canvas.drawImage(path, 0, 0, canvasWidth, canvasHeight)
  wx.drawCanvas({ 
    canvasId: 'canvas',
    reserve: true,
    actions: canvas.getActions()
  })
},
onTouchMove(e) {
  const startX = e.changedTouches[0].x;
  const startY = e.changedTouches[0].y;
  // 刮卡轨迹
  canvas.moveTo(startX, startY);
  // 刮卡效果
  canvas.clearRect(startX, startY, 20, 20)
  this.data.area += 80;
  if(this.data.area > canvasWidth*canvasHeight*0.4) {
    this.setData({ shouldShowPrize: true })
  };
  wx.drawImage({
    canvasId: 'canvas',
    reserve: true,
    actions: canvas.getActions(),
  })
}

wx.drawImage(): 微信 API 绘图-绘制画布