js 手写签字功能

// 绘制签名, 传入canvas的父元素id
function SignHandler (tid, callback) {
  this.el = document.getElementById(tid)
  this.init(callback)
}
SignHandler.prototype = {
  init (callback) {
    this.can = this.el.getElementsByTagName('canvas')[0]
    this.ctx = this.can.getContext('2d')
    let tp = document.createElement('p')
    tp.setAttribute('style', `position:absolute;right:10px;bottom:${this.can.height - 28}px;width:50px;background:rgba(0,0,0,0.2);color:#fff;text-align:center;cursor:pointer;border-radius:13px;height:26px;padding:0;margin:0;line-height:26px;z-index:50;`)
    tp.innerHTML = '清除'
    tp.addEventListener('click', () => {
      this.clear()
      if (callback) { callback() }
    })
    this.el.append(tp)
    
    // 初始化签名样式
    this.ctx.fillStyle = '#fff'
    // this.ctx.fillRect(0, 0, this.can.width, this.can.height)
    this.ctx.fillStyle = '#333'
    this.ctx.lineWidth = '3'
    this.ctx.lingJoin = 'round'
    this.isTouching = false
    // 绘制轨迹点
    this.touchDots = ''
    this.tStart = new Date().getTime()
    this.can.onmousedown = (e) => {
      if (e.button === 0 && e.target === this.can) {
        let tinfo = this.el.getClientRects()[0]
        this.tTop = Math.round(tinfo.x)
        this.tLeft = Math.round(tinfo.y)
        this.mouseDown(e, this)
      }
    }
    this.can.onmousemove = (e) => {
      this.mouseMove(e, this)
    }
    this.can.onmouseup = (e) => {
      if (e.button === 0) {
        this.mouseUp(e, this)
      }
    }
    window.addEventListener('mouseup', () => { this.isTouching = false }, false)
  },
  mouseDown (e, _this) {
    _this.isTouching = true
    let tob = {
      // x: e.clientX - _this.tLeft -5,
      // y: e.clientY - _this.tTop +5
      x: e.offsetX,
      y: e.offsetY
    }
    _this.touchDots = saveDot(_this.touchDots, tob.x, tob.y)
    _this.drawLine(tob.x, tob.y)
  },
  mouseMove (e, _this) {
    if (_this.isTouching) { e.preventDefault() } else { return }
    let tEndt = new Date().getTime()
    if (!_this.isTouching || (tEndt - _this.tStart < 20)) { return }
    let tob = {
      // x: e.clientX - _this.tLeft - 5,
      // y: e.clientY - _this.tTop + 5
      x: e.offsetX,
      y: e.offsetY
    }
    _this.drawLine(tob.x, tob.y)
    _this.tStart = tEndt
    _this.touchDots = saveDot(_this.touchDots, tob.x, tob.y)
  },
  mouseUp (e, _this) {
    _this.isTouching = false
    let tob = {
      // x: e.clientX - _this.tLeft -5,
      // y: e.clientY - _this.tTop +5
      x: e.offsetX,
      y: e.offsetY
    }
    _this.touchDots = saveDot(_this.touchDots, tob.x, tob.y, 1)
    _this.drawLine(tob.x, tob.y)
    _this.isDrawing = false
  },
  keyDown (e, _this) {
    _this.isTouching = true
    let tob = {
      x: _this.can.width - e.touches[0].pageY - _this.tLeft,
      y: e.touches[0].pageX - _this.tTop
    }
    _this.touchDots = saveDot(_this.touchDots, tob.x, tob.y)
    _this.drawLine(tob.x, tob.y)
  },
  keyMove (e, _this) {
    let tEndt = new Date().getTime()
    if (!_this.isTouching || (tEndt - _this.tStart < 40)) { return }
    let tob = {
      x: (_this.can.width - e.changedTouches[0].pageY) - _this.tLeft,
      y: e.changedTouches[0].pageX - _this.tTop
    }
    _this.drawLine(tob.x, tob.y)
    _this.tStart = tEndt
    _this.touchDots = saveDot(_this.touchDots, tob.x, tob.y)
  },
  keyUp (e, _this) {
    _this.isTouching = false
    let tob = {
      x: (_this.can.width - e.changedTouches[0].pageY) - _this.tLeft,
      y: e.changedTouches[0].pageX - _this.tTop
    }
    _this.touchDots = saveDot(_this.touchDots, tob.x, tob.y, 1)
    _this.drawLine(tob.x, tob.y)
    _this.isDrawing = false
  },
  drawLine (x, y) {
    if (!this.isDrawing) {
      this.ctx.beginPath()
      this.ctx.moveTo(x, y)
      this.isDrawing = true
    } else {
      this.ctx.lineTo(x, y)
      this.ctx.stroke()
    }
  },
  clear () {
    // this.ctx.fillStyle = '#fff'
    this.ctx.clearRect(0, 0, this.can.width, this.can.height)
    // this.ctx.clearRect(0, 0, this.can.width, this.can.height)
    this.touchDots = ''
    this.isTouching = false
    this.isDrawing = false
  },
  getImage () {
    if (this.touchDots === '') {
      return ''
    }
    let timg = this.can.toDataURL('image/png')
    return timg
  },
  direct (e) {
    if (e.alpha > 90 && e.alpha < 270) {
      this.directed = 'left'
      return 'left'
    } else {
      this.directed = 'right'
      return 'right'
    }
  }
}

function saveDot (s, x, y, b) {
  if (s) {
    s += '~'
  }
  s += x + '|' + y
  if (b) {
    s += ','
  }
  return s
}