vue3 语法 实现 canvas 签名

可以使用 Vue3 的 `ref` 和 `canvas` 元素来实现签名功能。以下是一个简单的实现：

1. 在 Vue3 组件的 `template` 中添加一个 `canvas` 元素，并给它添加一个 `ref` 属性：

<template>
  <canvas ref="canvas"></canvas>
</template>

2. 在组件的 `setup` 方法中获取该 `canvas` 元素的引用，并定义一个 `draw` 方法用于绘制签名：

<script>
import { ref } from 'vue';

export default {
  setup() {
    const canvasRef = ref(null);

    const draw = (ctx, x, y, isDown) => {
      if (isDown) {
        ctx.beginPath();
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        ctx.lineJoin = 'round';
        ctx.moveTo(x, y);
        ctx.lineTo(x, y);
        ctx.stroke();
      }
    };

    return {
      canvasRef,
      draw,
    };
  },
};
</script>

3. 在组件的 `mounted` 钩子中获取 `canvas` 元素的 `2d` 绘图上下文，并添加事件监听器，监听鼠标的移动和点击事件：

<script>
import { ref } from 'vue';

export default {
  setup() {
    const canvasRef = ref(null);

    const draw = (ctx, x, y, isDown) => {
      if (isDown) {
        ctx.beginPath();
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        ctx.lineJoin = 'round';
        ctx.moveTo(x, y);
        ctx.lineTo(x, y);
        ctx.stroke();
      }
    };

    const mounted = () => {
      const canvas = canvasRef.value;
      const ctx = canvas.getContext('2d');
      let isDrawing = false;
      let lastX = 0;
      let lastY = 0;

      canvas.addEventListener('mousedown', (e) => {
        isDrawing = true;
        lastX = e.offsetX;
        lastY = e.offsetY;
      });

      canvas.addEventListener('mousemove', (e) => {
        if (!isDrawing) return;
        draw(ctx, e.offsetX, e.offsetY, isDrawing);
        lastX = e.offsetX;
        lastY = e.offsetY;
      });

      canvas.addEventListener('mouseup', () => {
        isDrawing = false;
      });

      canvas.addEventListener('mouseout', () => {
        isDrawing = false;
      });
    };

    return {
      canvasRef,
      mounted,
    };
  },
  mounted() {
    this.mounted();
  },
};
</script>

现在，`canvas` 元素就可以实现签名功能了。当用户在 `canvas` 上按下鼠标并移动时，会在 `canvas` 上绘制出一条曲线。