vue3 canvas 签名

Vue3和Canvas一起使用可以实现签名功能，以下是一个简单的实现方式：

1. 创建一个Canvas组件

在Vue3中，可以使用`<canvas>`标签创建一个Canvas组件，如下所示：

<template>
  <div>
    <canvas ref="canvas" @mousedown="startDrawing" @mousemove="draw" @mouseup="finishDrawing"></canvas>
  </div>
</template>

这里使用了`ref`属性来引用Canvas元素，使用`@mousedown`、`@mousemove`和`@mouseup`属性来监听鼠标事件。

2. 初始化Canvas

在组件的`mounted()`钩子函数中，可以获取Canvas元素并初始化它，如下所示：

mounted() {
  this.canvas = this.$refs.canvas
  this.context = this.canvas.getContext('2d')
  this.context.lineWidth = 2
  this.context.lineCap = 'round'
  this.context.strokeStyle = '#000000'
},

这里使用`getContext()`方法获取Canvas的2D上下文，设置线条的宽度、端点和颜色。

3. 实现签名功能

在组件中实现`startDrawing()`、`draw()`和`finishDrawing()`方法，如下所示：

methods: {
  startDrawing(event) {
    this.isDrawing = true
    this.lastX = event.offsetX
    this.lastY = event.offsetY
  },
  draw(event) {
    if (!this.isDrawing) return
    this.context.beginPath()
    this.context.moveTo(this.lastX, this.lastY)
    this.context.lineTo(event.offsetX, event.offsetY)
    this.context.stroke()
    this.lastX = event.offsetX
    this.lastY = event.offsetY
  },
  finishDrawing() {
    this.isDrawing = false
  }
}

这里使用了`isDrawing`变量来表示是否正在绘制，使用`lastX`和`lastY`变量来保存上一个点的坐标，使用`offsetX`和`offsetY`属性来获取鼠标在Canvas上的坐标。

4. 保存签名图片

实现一个保存签名图片的方法，如下所示：

save() {
  const dataURL = this.canvas.toDataURL()
  // 将 dataURL 发送到服务器保存
}

这里使用了`toDataURL()`方法将Canvas转换成base64编码的图片数据，可以将这个数据发送到服务器保存。

这就是一个简单的Vue3和Canvas结合实现签名功能的方法。