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 数据。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！