Canvas手写签名板核心是监听鼠标/触摸事件实时绘图并支持清空、保存；需统一处理坐标偏移、禁用默认行为、连续路径绘制、抗锯齿设置、base64导出、高DPI适配等关键细节。
Canvas手写签名板的核心是监听鼠标或触摸事件，实时绘制路径，并提供清空、保存等基础操作。关键在于坐标转换、事件绑定与绘图状态管理。
监听鼠标/触摸事件获取轨迹点
签名板需兼容桌面和移动设备，所以同时处理 mousedown/mousemove/mouseup 和 touchstart/touchmove/touchend 事件。注意：
- 触摸事件的坐标需从
touches[0]中获取，且要减去 Canvas 相对于视口的偏移（getBoundingClientRect()） - 鼠标事件直接用
clientX/clientY，同样需减去 Canvas 左上角位置 - 避免默认行为（如 touchmove 页面滚动），调用
preventDefault()
用 beginPath() + moveTo() + lineTo() 连续绘线
每次按下（或触摸开始）时调用 beginPath()，记录起始点；移动过程中持续调用 lineTo(x, y) 并 stroke()，形成连续笔迹：
- 设置
ctx.lineWidth、ctx.lineCap = 'round'让线条更自然 - 不要在每次
lineTo后都beginPath()，否则会断开路径 - 推荐启用抗锯齿：
ctx.lineJoin = 'round'
保存与清空签名图像
签名本质是一张位图，可直接导出为 PNG：
立即学习“前端免费学习笔记（深入）”；
- 调用
canvas.toDataURL('image/png')获取 base64 字符串，用于上传或显示缩略图 - 清空画布：用
ctx.clearRect(0, 0, canvas.width, canvas.height)，不要重设width属性（会重置所有上下文状态） - 若需“撤销”功能，可维护一个路径历史栈，每次绘制前保存当前
ctx.getImageData()（性能敏感，慎用）
适配高 DPI 屏幕（如 Retina）
否则签名在高清屏上会模糊：
- 读取
window.devicePixelRatio - 将 canvas 的
width和height属性放大对应倍数 - 再用 CSS 将 canvas 样式宽高设为原始尺寸（如
style="width:300px;height:150px;"） - 最后调用
ctx.scale(dpr, dpr)确保绘图坐标系匹配
不复杂但容易忽略细节，尤其是坐标对齐和像素比适配。实现后即可嵌入表单，配合 hidden input 提交 base64 数据。
