vue canvas 线上签名

<template>
  <div id="box">
    <div class="main" id='main'>
      <canvas ref="saveCanvas" width="500" height="400" @mousedown="ctxDown($event)" @mousemove="ctxMove($event)" @mouseup="ctxUp" @mouseleave="ctxLeave" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      canvas: null,
      ctx: null,
      isDown: false,
      main:{}
    }
  },
  mounted(){
    //签名
    this.canvas = this.$refs.saveCanvas
    this.ctx = this.canvas.getContext('2d')
    this.ctx.lineWidth = 1
    this.ctx.strokeStyle="red";
    this.ctx.lineCap = 'round'   //线的连接处的形式
    this.main =  document.getElementById("main");
  },
  methods: {
    ctxDown(e){
      console.log('ctxDown',e)
      this.isDown = true
      const len = 50
      const canvasX = e.clientX - this.main.offsetLeft
      const canvasY = e.clientY - this.main.offsetTop
      this.ctx.beginPath()
      this.ctx.moveTo(canvasX, canvasY)
    },
    ctxMove(e){
      console.log('ctxMove',e,e.target.offsetLeft)
      if (this.isDown) {
        const len = 50
        const canvasX = e.clientX - this.main.offsetLeft
        const canvasY = e.clientY - this.main.offsetTop
        this.ctx.lineTo(canvasX, canvasY)
        this.ctx.stroke()
      }
    },
    ctxUp(){
      console.log('ctxUp')
      this.isDown = false
      this.ctx.closePath()
    },
    ctxLeave(){
      console.log('ctxLeave')
      this.isDown = false
    }
  },
}
</script>
<style scoped lang="scss">
</style>