微信小程序 canvas实现手动签名

<canvas class="canvas" id="canvas" canvas-id="canvas" disable-scroll="true" bindtouchstart="canvasStart"
        bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEnd"
        binderror="canvasIdErrorCallback"></canvas>

Page({
  data: {
    isBgDraw: false,            //白色背景已画；
    context: null,
    isButtonDown: false,
    lineArr: [],
    canWidth: App.globalData.windowWidth,
    canHeight: App.globalData.windowHeight
  },
  onReady() {
    this.data.context = wx.createCanvasContext('canvas');
  },
  //开始
  canvasStart(event) {
    this.data.isButtonDown = true;
    this.data.lineArr.push({
      isStart: true,
      x: event.touches[0].x,
      y: event.touches[0].y
    })
    this.data.context.setStrokeStyle('#000000');
    this.data.context.setLineWidth(4);
    this.data.context.setLineCap('round');
    this.data.context.setLineJoin('round');
    if (this.data.isBgDraw) return;
    this.data.context.setFillStyle('white')
    this.data.context.fillRect(0, 0, this.data.canWidth, this.data.canHeight)
    this.data.context.draw();
    this.data.isBgDraw = true;
  },
  //过程
  canvasMove(event) {
    if (!this.data.isButtonDown) return;
    this.data.lineArr.push({
      isStart: false,
      x: event.touches[0].x,
      y: event.touches[0].y
    })

    this.data.lineArr.forEach(item => {
      if (item.isStart) {
        this.data.context.moveTo(item.x, item.y)
      } else {
        this.data.context.lineTo(item.x, item.y)
      }
    })
    this.data.context.stroke();
    this.data.context.draw(true);
  },
  canvasEnd(event) {
    this.data.isButtonDown = false;
  },
  clearDraw() {
    //清除画布
    this.data.lineArr = [];
    this.data.context.clearRect(0, 0, this.data.canWidth, this.data.canHeight);
    this.data.context.draw(true);
    this.data.isBgDraw = false;
  },
  //导出图片
  getImg() {
    if (this.data.lineArr.length <= 1) {
      wx.showModal({
        title: '提示',
        content: '签名内容不能为空！',
        showCancel: false
      });
      return false;
    };
    //生成图片
    wx.canvasToTempFilePath({
      canvasId: 'canvas',
      success: result => {
        console.log(result.tempFilePath);
        //存入服务器
      }
    })
})