Vue使用Canvas实现电子签名功能示例

当使用Vue来实现电子签名功能时，可以结合Canvas元素和Vue的数据绑定功能来实现。下面是一个简单的示例，演示了如何在Vue中使用Canvas实现电子签名功能：

<template>
  <div>
    <!-- Canvas元素用于绘制电子签名 -->
    <canvas
      ref="canvas"
      :width="canvasWidth"
      :height="canvasHeight"
      @mousedown="startDrawing"
      @mousemove="draw"
      @mouseup="finishDrawing"
    ></canvas>
    <!-- 清除按钮，点击后清除Canvas上的内容 -->
    <button @click="clearCanvas">Clear</button>
    <!-- 保存按钮，点击后保存签名数据 -->
    <button @click="saveSignature">Save</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      canvasWidth: 400,
      canvasHeight: 200,
      drawing: false,
      signatureData: null
    };
  },
  methods: {
    // 开始绘制签名
    startDrawing(event) {
      this.drawing = true;
      const canvas = this.$refs.canvas;
      this.ctx = canvas.getContext('2d');
      this.ctx.beginPath();
      const x = event.offsetX;
      const y = event.offsetY;
      this.ctx.moveTo(x, y);
    },
    // 绘制签名
    draw(event) {
      if (this.drawing) {
        const x = event.offsetX;
        const y = event.offsetY;
        this.ctx.lineTo(x, y);
        this.ctx.stroke();
      }
    },
    // 完成绘制签名
    finishDrawing() {
      this.drawing = false;
    },
    // 清除Canvas上的内容
    clearCanvas() {
      const canvas = this.$refs.canvas;
      this.ctx.clearRect(0, 0, canvas.width, canvas.height);
    },
    // 保存签名数据
    saveSignature() {
      this.signatureData = this.$refs.canvas.toDataURL();
    }
  }
};
</script>

<style>
canvas {
  border: 1px solid #000;
}
</style>

总结：

当在Canvas画布上按下鼠标并移动时，会触发startDrawing和draw方法来绘制签名。当释放鼠标时，会触发finishDrawing方法来停止绘制。通过这些方法，便可以在Canvas上实现用户的手写签名。

另外，可以使用clearCanvas方法来清除Canvas上的内容，以及saveSignature方法来保存签名数据。saveSignature方法使用Canvas的toDataURL方法将Canvas上的内容转换为Base64编码的图片数据，并将其保存在signatureData属性中。

通过该示例，我们可以轻松地实现交互式的电子签名功能，并将签名数据保存在Vue的数据中，以便后续处理或展示。