在Vue项目中实现签名

经常在银行的业务或者是电子合同的签署是会有签名的场景,就想看一下怎么实现,但是自己对于canvas并不是熟悉的,在这里记录一下这个写法

代码配置

<template>
  <!-- 手写签名组件 -->
  <div class="page sign-page">
    <div class="content">
      <div class="sign-wrap" id="signWrap">
        <canvas id="myCanvas" width="100%" height="100%"></canvas>
      </div>
    </div>
    <div class="con-btn">
      <span class="staging-btn size14" @click="clearArea()">清除签名</span>
      <span class="submit-btn size14" @click="saveSign()">确认签名</span>
    </div>
    <div class="img">
      <img class="myimg" >
    </div>
  </div>
</template>
<script>
export default {
  name: "signature",
  data() {
    return {
      image: "",
      mousePressed: false,
      c: "",
      ctx: "",
      lastX: 0,
      lastY: 0,
      $img:''
    };
  },
  mounted() {
    this.$nextTick(function () {
      this.$img = document.getElementsByClassName('myimg')[0]
    });
    this.image =