vue3+canvas手写签名

<template>
  <div>
    <!-- 创建一个 Canvas 元素，并设置宽度和高度 -->
    <canvas ref="canvas" width="400" height="200"
      <!-- 绑定鼠标事件 -->
      @mousedown="startDrawing"
      @mouseup="stopDrawing"
      @mousemove="draw"
      @mouseleave="stopDrawing"
    ></canvas>
    <!-- 创建一个清空按钮，绑定 click 事件 -->
    <button @click="clearCanvas">清空</button>
    <!-- 创建一个保存按钮，绑定 click 事件 -->
    <button @click="saveCanvas">清空</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

// 定义一个接口，表示一个坐标点
interface Point {
  x: number;
  y: number;
}

export default defineComponent({
  data() {
    return {
      // 当前是否正在绘制
      drawing: false,
      // 上一个坐标点
      lastPoint: null as Point | null,
    };
  },
  methods: {
    // 开始绘制
    startDrawing() {
      this.drawing = true;
    },
    // 停止绘制
    stopDrawing() {
      this.drawing = false;
      this.lastPoint = null;
    },
    // 在 Canvas 上绘制签名
    draw(event: MouseEvent) {
      // 如果没有在绘制，则直接返回
      if (!this.drawing) return;

      // 获取 Canvas 元素和 2D 上下文
      const canvas = this.$refs.canvas as HTMLCanvasElement;
      const ctx = canvas.getContext("2d")!;

      // 获取当前鼠标位置，作为新的坐标点
      const newPoint: Point = {
        x: event.offsetX,
        y: event.offsetY,
      };

      // 设置线条的宽度、端点和颜色
      ctx.lineWidth = 2;
      ctx.lineCap = "round";
      ctx.strokeStyle = "#000";

      // 如果上一个坐标点不存在，则将当前坐标点作为上一个坐标点
      if (!this.lastPoint) {
        this.lastPoint = newPoint;
        return;
      }

      // 绘制线条
      ctx.beginPath();
      ctx.moveTo(this.lastPoint.x, this.lastPoint.y);
      ctx.lineTo(newPoint.x, newPoint.y);
      ctx.stroke();

      // 将当前坐标点保存为上一个坐标点
      this.lastPoint = newPoint;
    },
    // 清空 Canvas
    clearCanvas() {
      // 获取 Canvas 元素和 2D 上下文
      const canvas = this.$refs.canvas as HTMLCanvasElement;
      const ctx = canvas.getContext("2d")!;

      // 清空 Canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // 停止绘制
      this.stopDrawing();
    },
    //保存签名
    saveCanvas() {
      let canvas = this.$refs.canvas as HTMLCanvasElement;
      let context = canvas.getContext('2d')
      let dataUrl = canvas.toDataURL()
      let link = document.createElement('a')
      link.href = dataUrl
      link.download = 'signature.png'
      link.click()
	}
  },
});