小程序 刮刮乐效果

<view class="box">
  <canvas canvas-id="myCanvas" class="myCanvas"
          disable-scroll="false"
          bindtouchstart="touchStart"
          bindtouchmove="touchMove"
          bindtouchend="touchEnd"
          style="width:100%;height:100%;background:url('{{img}}')center ">
  </canvas>

</view>

/* pages/gua/gua.wxss */
.box{
 width: 100%;
 height: 300px;
 background: red;
 padding: 20rpx;
 box-sizing: border-box;
}
.myCanvas{
  width: 100%;
  height: 100%;
}

const ctx = wx.createCanvasContext("myCanvas");
data: {
    img:"/img/2.jpg",
    stareX:'',
    statrY:'',
  },
onReady: function () {
    ctx.setFillStyle('#eee')
    ctx.fillRect(0, 0, 400, 300)
    ctx.draw()
  },
touchStart:function(e){
    console.log(e)
    var s_x = e.changedTouches[0].x;
    var s_y = e.changedTouches[0].y
    console.log(s_x, s_y);
    ctx.save(); //保存当前坐标轴的缩放、旋转、平移信息
    ctx.beginPath() //开始一个路径
    ctx.clearRect(s_x, s_y, 10, 10);
    ctx.restore(); //恢复之前保存过的坐标轴的缩放、旋转、平移信息
  },
  touchMove: function (e) {
    var s_x = e.changedTouches[0].x
    var s_y = e.changedTouches[0].y
    ctx.save(); //保存当前坐标轴的缩放、旋转、平移信息
    ctx.moveTo(this.startX, this.startY); //把路径移动到画布中的指定点，但不创建线条
    ctx.clearRect(s_x, s_y, 10, 10); //添加一个新点，然后在画布中创建从该点到最后指定点的线条
    ctx.restore() //恢复之前保存过的坐标轴的缩放、旋转、平移信息
    this.startX = s_x;
    this.startY = s_y;
    //只是一个记录方法调用的容器，用于生成记录绘制行为的actions数组。context跟<canvas/>不存在对应关系，一个context生成画布的绘制动作数组可以应用于多个<canvas/>
    wx.drawCanvas({
      canvasId: 'myCanvas',
      reserve: true,
      actions: ctx.getActions() // 获取绘图动作数组
    })
  },