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() 完成绘制。
四、导出签名图像为 PNG 数据URL
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 即可精确复现原签名轨迹。