canvas手写签名必须用touchstart/touchmove而非mousedown，因移动端safari和android浏览器默认拦截mousedown以实现缩放或滚动，导致轨迹断连；需监听touchstart/touchmove/touchend并preventdefault，用touches[0].clientx减去getboundingclientrect().left获取canvas坐标，pc端需检测ontouchstart做fallback。
Canvas手写签名为什么必须用touchstart/touchmove而不是mousedown
移动端 Safari 和 Android 浏览器默认会拦截 mousedown 事件来实现页面缩放或滚动，导致手写轨迹断连或完全无响应。必须用触控事件才能可靠捕获手指移动路径。
实操建议：
- 监听
touchstart、touchmove、touchend三个事件，禁用默认行为：event.preventDefault()（尤其在touchmove中） - 获取坐标时别直接用
event.clientX/Y，要转成 canvas 坐标：const rect = canvas.getBoundingClientRect(); const x = e.touches[0].clientX - rect.left; - PC 端需 fallback：用
mousedown/mousemove/mouseup，但注意检测'ontouchstart' in window来区分设备
canvas.getContext('2d') 绘制签名时线宽和抗锯齿怎么调才像真笔迹
浏览器默认的 lineCap: 'butt' 和粗线会显得生硬，签名失真。真实手写有起笔轻、收笔淡、边缘微虚的特点。
实操建议：
- 设
ctx.lineCap = 'round'和ctx.lineJoin = 'round'，避免折角突兀 - 线宽别固定，可按压感模拟（若支持 pressure）或按速度动态变化：
ctx.lineWidth = Math.max(1, 3 - speed * 0.5) - 开启抗锯齿：
ctx.imageSmoothingEnabled = false（防止导出时模糊），但绘制时保留ctx.shadowBlur = 0.5可轻微柔化边缘 - 避免每点都
beginPath()→moveTo()→lineTo()，应累积点数组，再批量绘制，否则性能差且线条不连贯
签名数据怎么存、传、验：base64 还是 Blob？toDataURL() 的坑在哪
canvas.toDataURL('image/png') 最常用，但默认生成 data URL 长度可能超 2MB，HTTP GET 请求或 localStorage 会失败；且 PNG 不压缩，体积大。
实操建议：
- 优先用
canvas.toBlob(callback, 'image/png', 0.8)（第三个参数是质量，0.8 平衡清晰与体积），直接得 Blob，可FormData.append('signature', blob, 'sig.png')发送 - 若必须用 base64，务必截断前缀：
data:image/png;base64,，后半段才是 Base64 内容，服务端解码前要校验长度和字符集 - 签名有效性不能只靠图片存在，前端应同步计算哈希（如
crypto.subtle.digest('SHA-256', new Uint8Array(await blob.arrayBuffer()))）并随请求发送，后端比对防篡改
清空画布后为什么再次签名变细或偏移？canvas.width = canvas.width 的副作用
直接赋值 canvas.width = canvas.width 看似清空，实则重置了 canvas 的内部绘图状态（包括 lineWidth、strokeStyle、transform），导致后续绘制参数丢失。
实操建议：
- 清空用
ctx.clearRect(0, 0, canvas.width, canvas.height)，它只擦除像素，不重置上下文 - 如果要重置样式（比如换颜色/粗细），应在每次签名开始前显式设置：
ctx.strokeStyle = '#000'; ctx.lineWidth = 2.5; - canvas 尺寸缩放后未重设
ctx.scale()也会造成偏移——监听window.resize时，不仅要重设 canvas.width/height，还要调用ctx.setTransform(1, 0, 0, 1, 0, 0)清除旧变换
签名区域的 DPI 适配、离线缓存策略、多点触控冲突、iOS input focus 键盘弹出遮挡画布……这些细节不处理，上线后用户第一笔就签不上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
