一、Canvas手写签名核心原理

Canvas手写签名的本质是通过监听鼠标/触摸事件，将用户的移动轨迹转换为像素点的连续绘制。其核心流程分为三个阶段：事件捕获、路径计算和图形渲染。

1.1 坐标系统映射

Canvas使用笛卡尔坐标系，原点(0,0)位于左上角。需将设备输入的绝对坐标转换为Canvas相对坐标：

function getCanvasCoords(e, canvas) {
  const rect = canvas.getBoundingClientRect();
  return {
    x: e.clientX - rect.left,
    y: e.clientY - rect.top
  };
}

此转换确保在不同分辨率设备上保持一致的绘制效果，特别在移动端需考虑viewport缩放影响。

1.2 路径绘制机制

Canvas通过beginPath()和lineTo()方法实现连续绘制：

let isDrawing = false;
let lastX = 0;
let lastY = 0;
canvas.addEventListener('mousedown', (e) => {
  isDrawing = true;
  const {x, y} = getCanvasCoords(e, canvas);
  ctx.beginPath();
  ctx.moveTo(x, y);
  lastX = x;
  lastY = y;
});
canvas.addEventListener('mousemove', (e) => {
  if (!isDrawing) return;
  const {x, y} = getCanvasCoords(e, canvas);
  ctx.lineTo(x, y);
  ctx.stroke();
  lastX = x;
  lastY = y;
});

此实现存在性能瓶颈：每帧触发stroke()会导致频繁重绘。优化方案是采用路径缓存机制，在mouseup时统一渲染。

二、跨设备兼容性处理

2.1 触摸事件适配

移动端需同时监听touchstart、touchmove、touchend事件：

function handleTouch(e) {
  const touch = e.touches[0];
  const {x, y} = getCanvasCoords(touch, canvas);
  // 后续处理逻辑与鼠标事件相同
}

需特别注意touchmove事件的preventDefault()调用，否则可能触发页面滚动。

2.2 笔压模拟实现

高端设备支持笔压检测，可通过PointerEvent的pressure属性获取：

canvas.addEventListener('pointermove', (e) => {
  const pressure = e.pressure || 0.5; // 默认压力值
  ctx.lineWidth = 1 + pressure * 4; // 压力值映射到线宽
});

对于不支持笔压的设备，可通过速度估算模拟压力效果：

function estimatePressure(lastX, lastY, x, y) {
  const distance = Math.sqrt(Math.pow(x-lastX,2) + Math.pow(y-lastY,2));
  const speed = distance / (e.timeStamp - lastTimeStamp);
  return Math.min(1, speed / 10); // 归一化处理
}

三、签名数据持久化方案

3.1 图像数据导出

Canvas提供toDataURL()方法生成Base64编码图像：

function exportSignature() {
  return canvas.toDataURL('image/png', 0.8);
}

对于需要透明背景的场景，需在绘制前清空画布：

ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'transparent';
ctx.fillRect(0, 0, canvas.width, canvas.height);

3.2 矢量路径存储

更高效的方案是存储绘制路径数据，实现无损缩放：

const signatureData = {
  paths: [],
  color: '#000000',
  width: 2
};
// 绘制时存储路径
function storePath(points) {
  signatureData.paths.push({
    points,
    color: ctx.strokeStyle,
    width: ctx.lineWidth
  });
}
// 重绘函数
function redrawSignature() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  signatureData.paths.forEach(path => {
    ctx.strokeStyle = path.color;
    ctx.lineWidth = path.width;
    // 重构路径绘制逻辑...
  });
}

四、性能优化策略

4.1 离屏渲染技术

创建隐藏Canvas进行中间计算：

const offscreenCanvas = document.createElement('canvas');
offscreenCanvas.width = canvas.width;
offscreenCanvas.height = canvas.height;
const offscreenCtx = offscreenCanvas.getContext('2d');

复杂签名处理在离屏Canvas完成，最终通过drawImage()合并到主Canvas。

4.2 节流处理

对mousemove/touchmove事件进行节流：

function throttle(func, limit) {
  let lastFunc;
  let lastRan;
  return function() {
    const context = this;
    const args = arguments;
    if (!lastRan) {
      func.apply(context, args);
      lastRan = Date.now();
    } else {
      clearTimeout(lastFunc);
      lastFunc = setTimeout(function() {
        if ((Date.now() - lastRan) >= limit) {
          func.apply(context, args);
          lastRan = Date.now();
        }
      }, limit - (Date.now() - lastRan));
    }
  }
}

建议节流间隔设置为16ms（约60FPS）。

五、安全增强方案

5.1 防篡改机制

在导出数据时添加哈希校验：

function getSignatureHash() {
  const dataUrl = canvas.toDataURL();
  return CryptoJS.SHA256(dataUrl).toString();
}

服务端验证时需对比哈希值与存储值。

5.2 生物特征分析

通过绘制速度、压力变化等参数进行活体检测：

function analyzeSignature(paths) {
  const speedVariance = calculateSpeedVariance(paths);
  const pressureConsistency = checkPressureConsistency(paths);
  return {
    isMachineGenerated: speedVariance < 0.3 && pressureConsistency > 0.9,
    confidenceScore: Math.min(1, speedVariance * 0.7 + (1-pressureConsistency) * 0.3)
  };
}

六、完整实现示例

<canvas id="signatureCanvas" width="500" height="300"></canvas>
<button id="clearBtn">清除签名</button>
<button id="saveBtn">保存签名</button>
<script>
  const canvas = document.getElementById('signatureCanvas');
  const ctx = canvas.getContext('2d');
  let isDrawing = false;
  let lastX = 0;
  let lastY = 0;
  // 初始化画布
  ctx.strokeStyle = '#000000';
  ctx.lineWidth = 2;
  ctx.lineCap = 'round';
  ctx.lineJoin = 'round';
  // 事件监听
  ['mousedown', 'touchstart'].forEach(evt => {
    canvas.addEventListener(evt, startDrawing);
  });
  ['mousemove', 'touchmove'].forEach(evt => {
    canvas.addEventListener(evt, throttle(draw, 16));
  });
  ['mouseup', 'touchend'].forEach(evt => {
    canvas.addEventListener(evt, stopDrawing);
  });
  function startDrawing(e) {
    isDrawing = true;
    const pos = getPosition(e);
    ctx.beginPath();
    ctx.moveTo(pos.x, pos.y);
    lastX = pos.x;
    lastY = pos.y;
  }
  function draw(e) {
    if (!isDrawing) return;
    const pos = getPosition(e);
    ctx.lineTo(pos.x, pos.y);
    ctx.stroke();
    lastX = pos.x;
    lastY = pos.y;
  }
  function stopDrawing() {
    isDrawing = false;
  }
  function getPosition(e) {
    const touchEvent = e.touches ? e.touches[0] : e;
    const rect = canvas.getBoundingClientRect();
    return {
      x: touchEvent.clientX - rect.left,
      y: touchEvent.clientY - rect.top
    };
  }
  // 工具函数
  document.getElementById('clearBtn').addEventListener('click', () => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  });
  document.getElementById('saveBtn').addEventListener('click', () => {
    const dataUrl = canvas.toDataURL('image/png');
    const link = document.createElement('a');
    link.download = 'signature.png';
    link.href = dataUrl;
    link.click();
  });
  // 节流函数实现
  function throttle(func, limit) {
    let inThrottle;
    return function() {
      const args = arguments;
      const context = this;
      if (!inThrottle) {
        func.apply(context, args);
        inThrottle = true;
        setTimeout(() => inThrottle = false, limit);
      }
    }
  }
</script>

该实现完整覆盖了从基础绘制到高级功能的所有核心要素，开发者可根据实际需求进行模块化组合。在金融、医疗等需要电子签名的场景中，建议结合数字证书技术实现法律效力的签名方案。