如何用HTML和Canvas实现手写签名板功能？

本文共计757个文字，预计阅读时间需要4分钟。

Canvas实现手写签名板，核心步骤如下：

怎么获取准确的画笔坐标（别再用 event.clientX 直接算）

直接读 clientX/clientY 然后减去 canvas.getBoundingClientRect().left/top 是基础，但容易忽略滚动偏移和 CSS 缩放（比如页面 zoom 或父容器 transform: scale()）。尤其在微信内嵌浏览器里，getBoundingClientRect() 返回值可能被缓存或失真。

• 始终用 canvas.getBoundingClientRect() 动态算，不要缓存结果
• 对移动端，优先使用 event.touches[0] 而非 event.changedTouches[0]，避免多指操作时取错点
• 如果 canvas 有 CSS width/height（非属性），记得按比例缩放坐标：const rect = canvas.getBoundingClientRect(); const scaleX = canvas.width / rect.width; const x = (e.clientX - rect.left) * scaleX;

为什么鼠标画正常，手机一划就断线或跳点

根本原因是触控事件默认行为未禁用，导致页面滚动干扰；同时 touchmove 触发频率远高于 mousemove，不做节流会卡顿或产生冗余点。

• 必须在 touchstart 和 touchmove 的事件处理器中调用 e.preventDefault()（注意：只对目标 canvas 调用，别阻止全局）
• 用 requestAnimationFrame 节流 touchmove，而不是 setTimeout：避免丢点又保流畅
• 别混用 mousedown 和 touchstart 在同一个监听器里 —— iOS Safari 对混合事件支持差，建议分开绑定并用 'ontouchstart' in window 检测环境

clearRect() 清空后为什么签名变模糊或留残影

清空画布不是简单调 clearRect(0,0,w,h) 就完事。如果之前用了 ctx.lineCap = 'round' 或设置了 shadowBlur，清空后新路径仍受旧样式影响；更常见的是 canvas 像素比（devicePixelRatio）没重置，导致重绘时线条发虚。

立即学习“前端免费学习笔记（深入）”；

• 清空前先重置关键状态：ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.shadowBlur = 0; ctx.lineCap = 'butt';
• 若支持高清屏，初始化 canvas 时应按 window.devicePixelRatio 放大画布尺寸，并用 CSS 缩回显示大小，否则线条永远是 1px 像素风
• 别用 canvas.width = canvas.width 清屏 —— 这会重置所有上下文状态（包括 fillStyle），导致后续颜色丢失

最易被忽略的其实是签名导出环节：toDataURL('image/png') 在 iOS 上可能返回透明背景黑块，得手动用 createImageData 填白底；另外，用户签完不点“确认”就关闭页面，得用 beforeunload 提示保存，而不是依赖 sessionStorage 自动续存 —— 浏览器不保证它能跨进程恢复。