Canvas签名板需确保坐标对齐、高DPI清晰、透明PNG导出：动态校准坐标、适配devicePixelRatio缩放、清空画布用clearRect而非fillRect。
网页端用 Canvas 做签名板并导出透明 PNG，关键不在“能不能画”，而在于“画得准、导得清、用得稳”。核心是三点：坐标对齐不偏移、高 DPI 下不失真、导出时保留 alpha 通道。下面分步说清楚。
准确获取并绘制手写轨迹
签名断线、跳点、偏左偏上，90% 是坐标算错了。不能直接用 event.clientX 减个固定值，必须动态校准：
- 每次
pointermove或touchmove时，都调用canvas.getBoundingClientRect()获取实时位置，再计算相对坐标：const rect = canvas.getBoundingClientRect();<br>const x = e.clientX - rect.left;<br>const y = e.clientY - rect.top;
- 移动端必须在
touchstart和touchmove中加e.preventDefault()，否则页面滚动会打断书写流 - 只在
pointerdown时调一次beginPath() + moveTo(x, y)；后续pointermove只做lineTo(x, y) + stroke()，避免每帧新建路径变成点阵 - 统一用
pointer事件（而非分开写 mouse/touch），天然兼容 PC 和触屏设备
适配高清屏幕导出清晰图
Retina 屏或安卓高端机上签名模糊，几乎全是没处理 devicePixelRatio：
- 读取
const dpr = window.devicePixelRatio || 1 - 设置 canvas 元素的
width和height属性为物理像素：canvas.width = displayWidth * dpr;<br>canvas.height = displayHeight * dpr;
- 用 CSS 控制显示尺寸（如
style="width:300px;height:150px;"），再调ctx.scale(dpr, dpr) - 导出前确保绘制完成，再执行
canvas.toDataURL('image/png')，此时 base64 就是物理像素级清晰
确保导出带透明背景的 PNG
导出图片发灰、边缘有白边、贴进 PDF 像马赛克？问题往往出在“透明通道没保全”：
- 初始化时设
ctx.fillStyle = 'transparent'，清空画布用ctx.clearRect(0, 0, canvas.width, canvas.height)，别用fillRect填白底 - 导出前不要手动填色——哪怕只是
ctx.fillRect(0,0,w,h)，都会覆盖 alpha 通道 - 若需合成签名到某张底图上，先用
ctx.drawImage(bgImage, 0, 0)绘制背景，再画签名，最后导出；但纯签名导出时，canvas 本身必须保持透明底 - 验证是否真透明：把生成的 base64 贴到支持透明的编辑器（如 Photopea）里看，或插入
附加建议：提升可用性与稳定性
签名不是炫技，而是要让用户签得顺、审核人认得清、系统接得住：
- 禁用画布区域的默认行为：
canvas.style.touchAction = 'none'，防 iOS 滚动冲突 - 提供撤销（undo）功能：用数组缓存每次
stroke()的路径点，按需重绘；比反复清空+重画更高效 - 导出后可直接转为 Blob 提交：
fetch('/api/sign', { method: 'POST', body: dataUrlToBlob(dataUrl) })，服务端接收 base64 或二进制皆可 - 避免跨域污染：如果签名板里要叠加印章图或水印图，务必设
Access-Control-Allow-Origin，否则toDataURL()会返回空字符串或黑图
