如何用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，不做节流会卡顿或产生冗余点。