html5签名怎么签_HTML5用Canvas捕捉手写轨迹生成数字签名保存【签名】_网络技术

HTML5 Canvas可实现手写签名功能：一、初始化Canvas并获取2D上下文，禁用touchAction；二、监听鼠标/触摸事件获取归一化坐标；三、用quadraticCurveTo绘制平滑贝塞尔曲线；四、toDataURL导出PNG数据URL；五、保存坐标数组支持矢量还原。

如果您希望在网页中实现手写签名功能，HTML5 的 Canvas 元素可直接捕获鼠标或触摸点的连续轨迹，并将其渲染为可视签名，随后以图像或坐标数据形式保存。以下是实现该功能的具体步骤：

一、初始化Canvas并设置绘图上下文

Canvas 元素需预先在 HTML 中声明，并通过 JavaScript 获取其 2D 渲染上下文，这是所有绘图操作的基础。同时需禁用默认的页面缩放与滚动干扰，确保触控轨迹准确响应。

1、在 HTML 文件中添加标签。

2、使用 document.getElementById('signatureCanvas') 获取 canvas 对象。

3、调用 getContext('2d') 方法获取 2D 绘图上下文，并存储为变量 ctx。

4、为 canvas 设置 style.touchAction = 'none'，防止移动端浏览器触发默认手势行为。

签名依赖对用户输入点序列的实时采集，需分别绑定 mousestart/move/up 和 touchstart/move/end 事件，统一转换为归一化坐标，避免设备差异导致偏移。

1、为 canvas 添加 addEventListener('mousedown', startDrawing) 事件监听器。

2、添加 addEventListener('touchstart', startDrawing, { passive: false })，并设置 passive 为 false 以允许 preventDefault() 阻止滚动。

3、在 startDrawing 函数中调用 event.preventDefault() 并记录初始坐标（clientX/clientY 或 touches[0]）。

4、绑定 mousemove 和 touchmove 事件，持续收集移动中的相对位置并存入 points 数组。

直接使用 lineTo 连接点易产生锯齿，改用 quadraticCurveTo 或 bezierCurveTo 可生成更平滑的手写效果，提升签名自然感。

1、在 draw 函数中启用路径：调用 ctx.beginPath()。

2、将首个点设为起点：ctx.moveTo(points[0].x, points[0].y)。

3、对后续每两个相邻点之间插入一个控制点，执行 ctx.quadraticCurveTo(cp.x, cp.y, next.x, next.y)。

4、设置线条宽度为 ctx.lineWidth = 2.5，颜色为 ctx.strokeStyle = '#000'，并调用 ctx.stroke() 完成绘制。

toDataURL 方法可将当前 canvas 内容编码为 base64 字符串，适用于表单提交或后端上传，无需额外依赖库。

1、调用 canvas.toDataURL('image/png') 获取 PNG 格式的数据 URL。

2、将返回值赋给隐藏 input 元素的 value 属性：document.getElementById('signatureData').value = dataUrl。

3、若需压缩体积，可降低质量参数：canvas.toDataURL('image/jpeg', 0.8)（仅对 JPEG 有效）。

4、注意：透明背景导出为 JPEG 会变为黑色，应优先选用 PNG 格式。

相比位图，原始坐标序列具有无损缩放、轻量存储、支持笔压模拟等优势，适合需要高保真复现或二次编辑的场景。

1、将 points 数组通过 JSON.stringify(points) 转为字符串。

2、存入 hidden input 或 localStorage：localStorage.setItem('signaturePoints', jsonStr)。

3、还原时使用 JSON.parse(localStorage.getItem('signaturePoints')) 恢复坐标列表。

4、重绘时遍历该数组，按相同贝塞尔逻辑调用 quadraticCurveTo 即可精确复现原签名轨迹。