网页手写签名通过Canvas捕获鼠标或触摸轨迹生成base64 PNG图像并提交；含签名区渲染、跨端绘图事件绑定、toDataURL导出、清空重签及移动端适配优化。
网页手写签名的核心是用 Canvas 捕获鼠标或触摸轨迹，生成可提交的图像数据（如 base64 PNG），再与表单其他字段一并提交。不依赖插件，纯 HTML + JavaScript 即可实现。
1. 基础 Canvas 签名区域
在表单中插入一个固定尺寸的 <canvas>，设置清晰的边框和提示文字，方便用户识别签名区：
<div class="signature-area"> <canvas id="signatureCanvas" width="600" height="200"></canvas> <p style="margin-top:8px;font-size:14px;color:#666">请在此处签名（鼠标或手指绘制）</p> </div>
用 CSS 控制外观，例如加浅灰边框、圆角、背景色，提升可操作性：
canvas { border: 1px solid #ccc; border-radius: 4px; background: #fff; }
2. 绑定绘图事件（支持鼠标和触屏）
监听 mousedown/touchstart 开始绘图，mousemove/touchmove 连续描点，mouseup/touchend 结束。关键点：
立即学习“前端免费学习笔记（深入）”；
- 使用
ctx.lineCap = 'round'和ctx.lineWidth = 2让线条更自然 - 触摸事件需调用
event.preventDefault()防止页面滚动干扰 - 获取坐标时，统一用
getBoundingClientRect()计算相对于 canvas 的偏移，兼容缩放和滚动
3. 提交前导出签名图像
用户点击“确认签署”时，调用 canvas.toDataURL('image/png') 获取 base64 字符串，作为隐藏字段值提交：
<input type="hidden" name="signature_data" id="signatureData" value="" />
JavaScript 中赋值：
const dataUrl = canvas.toDataURL('image/png');
document.getElementById('signatureData').value = dataUrl;
后端收到后可解码保存为 PNG 文件，或直接存入数据库（注意 base64 数据较长，建议用 TEXT 或 BLOB 类型）。
4. 清空与重签功能
提供“清除”按钮，清空画布并重置隐藏字段：
function clearSignature() {
const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
document.getElementById('signatureData').value = '';
}
也可增加“已签名”状态提示，比如禁用签名区、显示小图标或水印文字（如“已签署”半透明覆盖），避免重复操作。
不复杂但容易忽略：移动端需测试真机触摸响应，部分安卓浏览器对 touchmove 触发频率敏感，可适当节流；签名图像建议最小宽度设为 400px，保障打印或归档时清晰可辨。
