js 实现自定义签名

通过canvas实现自定义签名

1. List item

// 结构
  <div id="myChart" :style="{width: '600px', height: '300px'}"></div>
  <button @click="submit"> 提交 </button>
  
 // js部分
function init(){
    
    let canvas = document.getElementById('can')
    canvas.width = 300
    canvas.height = 500
    let ctx = canvas.getContext('2d')
    ctx.strokeStyle = '#000'
    ctx.lineWidth = 1
    canvas.addEventListener('touchstart', (e) => {
    
      ctx.beginPath()
      ctx.moveTo(e.touches[0].pageX, e.touches[0].pageY)
    })
    canvas.addEventListener('touchmove', (e) => {
    
      ctx.lineTo(e.touches[0].pageX, e.touches[0].pageY)
      ctx.stroke()
    })
    canvas.addEventListener('touchend', (e) => {
    
      ctx.closePath()
    })
}
function submit () {
    
      let blank = document.createElement('canvas')
      let canvas = document.getElementById('can')
      blank.width = canvas.width
      blank.height = canvas.height
      // 新创建一个画布 判断是否相等 相等为true
    }