利用canvas制作一个vue的签名版

废话不多说，直接上代码，注释详细

<template>
        <div class="sign-canvas" ref="putImageData">
            <canvas id="canvas" width="400" height="600" @mousedown="canvasDown($event)" @mousemove="canvasMove($event)" @mouseup="canvasUp()" @mouseleave="canvasLeave()" ref="canvas">
                抱歉，您的浏览器暂不支持canvas元素
            </canvas>
            <div class="sign-btn">
                <div class="clear" @click="clear">
                    清空
                </div>
                <div class="save" @click="save">
                    保存
                </div>
            </div>
        </div>
    </template>
<script>
export default {
  data () {
    return {}
  },
  mounted () {
    this.show()
  },
  methods: {
    show () {
      this.canvas = this.$refs.canvas// 指定canvas
      this.ctx = this.canvas.getContext('2d') // 设置2D渲染区域
      this.ctx.lineWidth = 5 // 设置线的宽度
    },
    canvasDown (e) {
      this.canvasMoveUse = true // 通过变量进行判断是否需要进行绘画  true开始绘画  false取消绘画
      const canvasX = e.clientX - e.target.offsetLeft + document.documentElement.scrollLeft // e.clientX 是当前鼠标点击后距离浏览器可视窗口的X轴距离（相当于以中心点出发的距离减掉中心点后）  e.target.offsetLeft获取鼠标在浏览器中固定的位置（相当于中心点）    document.documentElement.scrollLeft获取页面的水平滚动条位置
      const canvasY = e.clientY - e.target.offsetTop + document.documentElement.scrollTop
      this.ctx.beginPath() // 移动的起点
      this.ctx.moveTo(canvasX, canvasY)
    },
    canvasMove (e) {
      // 只在移动是进行绘制图线
      if (this.canvasMoveUse) {
        const t = e.target
        let canvasX
        let canvasY
        canvasX = e.clientX - t.offsetLeft + document.documentElement.scrollLeft
        canvasY = e.clientY - t.offsetTop + document.documentElement.scrollTop
        this.ctx.lineTo(canvasX, canvasY)
        this.ctx.stroke()
      }
    },
    canvasUp () {
      this.canvasMoveUse = false
    },
    canvasLeave () {
      this.canvasMoveUse = false
    },
    clear () {
      this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height)
    },
    save () {
      const imgBase64 = this.$refs.canvas.toDataURL()
	  console.log(imgBase64)
    }
  }
}
</script>

    <style scoped>
        .sign-canvas{
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            height: 100%;
            padding: 20px 30px;
        }
        .sign-canvas canvas{
            background-color: #e0e3e5;
        }
        .sign-btn {
            display: flex;
            margin:20px 0;
        }
        .sign-btn div {
            width: 175px;
            text-align: center;
            height: 70px;
            line-height: 70px;
            color: #FFFFFF;
        }
        .sign-btn div:active {
            background-color: #CCCCCC;
            color: #333333;
        }
        .sign-btn .clear {
            background-color: #FF8F58;
        }
        .sign-btn .save {
            background-color: #0599D7;
        }
    </style>