js代码:
let ctx1;
let ctx2;
Page({
  /**
   * 页面的初始数据
   */
  data: {
    x:0,
    y:0, //x,y为开始坐标位置
    mx:0,
    my:0//mx,my为移动坐标位置
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //获取canvas id
    ctx1 = wx.createCanvasContext('img')
    ctx2 = wx.createCanvasContext('mask')
    ctx1.setFillStyle('red')
    ctx1.setFontSize(30)
    ctx1.fillText('谢谢参与',80,60)
    ctx1.draw()
    ctx2.setFillStyle('#6492d6')
    ctx2.fillRect(0,0,500,200)
    ctx2.draw()
  },
  //手指滑动开始
  strart:function(e){
    //获取触摸时候手指起始位置
    this.setData({
      x:e.touches[0].x,
      y:e.touches[0].y
    })
  },
  rmove:function(e){
   //获取触摸时候手指移动位置
   this.setData({
    mx:e.touches[0].x,
    my:e.touches[0].y
  })
  this.scrape(ctx2,this.data.x,this.data.y,this.data.mx,this.data.my)
  this.setData({
    x:e.touches[0].x,
    y:e.touches[0].y
  })
  },
  //清除阴影
  scrape:function(ctx,x,y,mx,my){
    ctx.globalCompositeOperation ='destination-out' //清除阴影
    ctx.setLineWidth(20)//线性宽度
    ctx.setLineJoin('round') //线性滑动时呈现圆形
    ctx.setLineJoin('round') //设置线条焦点样式
    ctx.moveTo(x, y)
    ctx.lineTo(mx, my)
    ctx.stroke() //从指定点到结束点画一个线条
    ctx.draw(true) //接着上一次绘画
  },