Canvas手写签名需确保DOM挂载后获取上下文；矢量化本质是保存坐标轨迹而非位图；移动端/PC端事件坐标须经getBoundingClientRect转换；SVG路径需贝塞尔拟合并统一坐标系。
Canvas 手写签名的 DOM 嵌入时机必须在 canvas 元素已挂载后
直接在 document.createElement('canvas') 后立刻调用 getContext('2d') 通常没问题，但若 canvas 来自 HTML 模板（如 Vue/React 组件或 innerHTML 插入），常见错误是脚本执行时元素尚未被浏览器解析——此时 getContext 返回 null，后续所有绘图操作静默失败。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 使用
document.getElementById('signature-canvas')或querySelector获取 canvas 前，确保它已在 DOM 中（可加if (!canvas) console.warn('canvas not found')快速定位） - 在框架中（如 React），把初始化逻辑放在
useEffect(() => { ... }, [])；纯 HTML 场景下，把脚本放在</body>前，或监听DOMContentLoaded - 避免用
document.write动态插入 canvas——它会重置整个文档流，导致上下文丢失
toDataURL('image/png') 不能直接用于矢量化，需先提取点序列
很多人误以为截图式导出就能“矢量化”，其实 toDataURL 生成的是位图（raster），放大后必然失真。真正矢量化指保存笔迹的坐标轨迹（x, y, timestamp），后续可转为 SVG <path d="..."> 或导出为 JSON。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 监听
mousedown/touchstart、mousemove/touchmove、mouseup/touchend，用数组累积{x, y, t}对象（t用Date.now()或performance.now()） - 注意触摸设备需禁用默认行为：
event.preventDefault()在touchstart和touchmove中，否则触发页面滚动 - 采样频率要控制：高频采集（如每帧）易产生冗余点，可用时间间隔（如 ≥10ms）或距离阈值（如 Δd ≥ 2px）做简化
SVG 矢量路径生成依赖点序列平滑与贝塞尔拟合
原始手写点列锯齿明显，直接连成 polyline 仍属折线，不是视觉上“流畅”的签名。要逼近真实手写感，必须做路径优化。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用
smoothstep或三次贝塞尔插值（如基于前/后两点计算控制点），避免高阶样条（如 Catmull-Rom）在端点处不稳定 - SVG
<path>的d属性推荐用M x y C cx1 cy1 cx2 cy2 x2 y2段拼接，比Q（二次）更可控 - 导出为 SVG 时，务必设置
viewBox与原始 canvas 尺寸一致（如viewBox="0 0 800 200"），否则缩放错乱 - 不要用
canvas.toBlob()再读取转 SVG——这是绕远路，且丢失轨迹语义
移动端 touch 事件坐标需转换为 canvas 本地坐标
直接取 event.touches[0].clientX 是视口坐标，未考虑 canvas 的 offset、缩放、滚动位置，导致签名偏移甚至画到画布外。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
canvas.getBoundingClientRect()获取实时位置，再减去 clientX/Y： const rect = canvas.getBoundingClientRect();const x = e.touches[0].clientX - rect.left;const y = e.touches[0].clientY - rect.top;- 注意：若 canvas 设置了 CSS
width/height（非canvas.width/height），需按比例缩放坐标（x *= canvas.width / rect.width） - PC 端同理，对
mouse事件也必须走getBoundingClientRect转换，不能硬编码 canvas 尺寸
签名的“矢量化”本质是保留轨迹语义而非图像像素，关键不在画得多像，而在点数据是否可逆、可缩放、可编辑。最容易被忽略的是坐标系统一致性——从事件捕获、到存储、再到 SVG 渲染，全程必须明确参考系，否则调试时点迹漂移、路径错位，问题会分散在多个环节里。
