兼容PC和H5的Canvas签名功能实现与原理详解

2023-09-28 01:53:07

利用canvas画笔线条的描边，配合鼠标摁下、移动、抬起或者移动端触摸开始、触摸移动、触摸抬起事件，可以实现签名功能。实现原理是：在canvas上监听鼠标或触摸事件，当鼠标或手指按下时，开始描边，当鼠标或手指移动时，继续描边，当鼠标或手指抬起时，停止描边。

这个签名工具函数兼容PC和H5，兼容PC和移动端，只需要一行代码就可以实现签名功能。下面是如何使用这个函数的示例代码：

// 获取canvas元素
var canvas = document.getElementById("signature-canvas");

// 创建签名工具函数
var signatureTool = new SignatureTool(canvas);

// 在canvas上监听鼠标或触摸事件
canvas.addEventListener("mousedown", function(e) {
  // 开始描边
  signatureTool.startDrawing(e);
});

canvas.addEventListener("mousemove", function(e) {
  // 继续描边
  signatureTool.keepDrawing(e);
});

canvas.addEventListener("mouseup", function(e) {
  // 停止描边
  signatureTool.stopDrawing(e);
});

// 移动端触摸事件
canvas.addEventListener("touchstart", function(e) {
  // 开始描边
  signatureTool.startDrawing(e);
});

canvas.addEventListener("touchmove", function(e) {
  // 继续描边
  signatureTool.keepDrawing(e);
});

canvas.addEventListener("touchend", function(e) {
  // 停止描边
  signatureTool.stopDrawing(e);
});