VUE使用canvas實現簽名組件

<template>
  <div class="sign">
    <div class="content">
      <canvas id="canvas" :width="width" :height="height"/>
    </div>
    <div class="btn">
      <button @click="clearCanvas()">清除</button>
      <button @click="save()">保存</button>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'App',
  data () {
    return {
    };
  },
  props: {
    // 畫佈寬度
    width: {
      type: Number,
      default: window.innerWidth
    },
    // 畫佈高度
    height: {
      type: Number,
      default: 500
    },
    // 筆觸半徑
    radius: {
      type: Number,
      default: 10
    },
    // 筆觸顏色
    color: {
      type: String,
      default: '#000'
    },
    // 畫佈填充背景
    fillStyle: {
      type: String,
      default: '#ccc'
    }
  },
  created () {
  },
  mounted () {
    this.int();
  },
  methods: {
    // 繪制塗擦效果圓形
    // @param { integer } 圓心的x坐標
    // @param { integer } 圓心的y坐標
    // @param { integer } 圓心半徑
    // @param { string } 填充的顏色
    fillCircle (ctx, x, y, radius, fillColor) {
      ctx.fillStyle = fillColor || this.color;
      ctx.beginPath();
      ctx.moveTo(x, y);
      ctx.arc(x, y, radius, 0, Math.PI * 2, false); // 標準畫圓
      ctx.fill();
    },
    // 保存圖片
    save (name = '簽名圖片') {
      let imgBase64 = this.canvas.toDataURL('image/png'); // 獲取截圖base64, 1表示質量(無損壓縮)
      let a = document.createElement('a');
      a.download = name + '.png'; // 必須要設置download屬性才能夠直接下載base64圖片
      a.href = imgBase64;
      a.click(); // 觸發點擊，起到下載效果
    },
    // 清除畫佈
    clearCanvas () {
      let canvas = this.canvas;
      canvas.getContext('2d').fillStyle = this.fillStyle;
      canvas.getContext('2d').fillRect(0, 0, this.width, this.height);
    },
    // 數據初始化
    int () {
      this.canvas = document.querySelector('#canvas');
      let ctx = this.canvas.getContext('2d');
      let move = false; // 按下標識
      ctx.fillStyle = this.fillStyle;
      ctx.fillRect(0, 0, this.width, this.height);
      // 事件兼容PC 移動端
      let eventStart = 'ontouchstart' in document ? 'touchstart' : 'mousedown';
      let eventMove = 'ontouchmove' in document ? 'touchmove' : 'mousemove';
      let eventEnd = 'ontouchend' in document ? 'touchend' : 'mouseup';
      this.canvas.addEventListener(eventStart, (e) => {
        console.log(e);
        let sx = e.touches ? e.touches[0].pageX : e.pageX;
        let sy = e.touches ? e.touches[0].pageY : e.pageY;
        move = true;
        this.fillCircle(ctx, sx, sy, this.radius);
      }, false);
      this.canvas.addEventListener(eventMove, (e) => {
        let sx = e.touches ? e.touches[0].pageX : e.pageX;
        let sy = e.touches ? e.touches[0].pageY : e.pageY;
        move && this.fillCircle(ctx, sx, sy, this.radius);
      }, false);
      this.canvas.addEventListener(eventEnd, (e) => {
        move = false;
      }, false);
    }
  }
};
</script>
<style lang="less" scoped>
.sign{
  .btn {
    padding:10px;
    button {
      height: 50px;
      width:100%;
      margin-bottom:10px;
      font-size: 20px;
    }
  }
}
</style>