Canvas.getContext('2d')返回null主因是DOM未就绪，需确保元素存在、参数小写、宽高设为HTML属性，并在DOMContentLoaded、useEffect或onMounted中执行。
Canvas.getContext('2d') 返回 null 怎么办
常见现象是脚本执行时 canvas 元素还没挂载到 DOM，尤其在 Vue/React 组件里用 v-if 或 useState 动态渲染，或通过 innerHTML 插入后立刻调用 getContext——这时返回 null，后续所有绘图静默失败。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
document.getElementById('signature-canvas')获取后加判空：if (!canvas) console.warn('canvas not found') - 纯 HTML 场景：把 JS 放在
</body>前，或包裹在document.addEventListener('DOMContentLoaded', ...)里 - React 中必须放在
useEffect(() => { ... }, [])；Vue 3 推荐用onMounted钩子 - 绝对不要用
document.write()动态插入canvas，它会清空整个文档流，上下文必然丢失
touchstart/mousemove 坐标偏移严重怎么校准
直接用 e.clientX/e.touches[0].clientX 会错，因为没减去 canvas 相对于视口的左上偏移。CSS 缩放、margin、父容器 transform 都会让 e.offsetX/Y 失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每次事件中必须先调
const rect = canvas.getBoundingClientRect() - 再算真实坐标：
const x = e.touches ? e.touches[0].clientX - rect.left : e.clientX - rect.left - 移动端务必加
canvas.style.touchAction = 'none'，否则系统手势（如双指缩放）会干扰轨迹 - 监听
touchstart和touchmove时，passive: false必须显式传入，否则preventDefault()无效
保存的是 PNG 还是点序列？怎么选
canvas.toDataURL('image/png') 生成的是位图，放大失真、无法编辑、不能做签名比对；而原始点序列（{x, y, t} 数组）才是矢量基础，支持 SVG 导出、缩放无损、甚至压力模拟和笔锋还原。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 基础需求（只存档+展示）：用
toDataURL+ hidden input 提交即可 - 进阶需求（需重绘、撤销、分析、高倍缩放）：必须保存每笔的完整点列，结构类似
{ points: [{x:120,y:80,t:1725347349123}], color: '#000', lineWidth: 3 } - 点太多要简化：用时间间隔（如只存
t差 ≥10ms 的点）或 RDP 算法压缩，避免手指微抖产生冗余 - 别走弯路：不要
toBlob()再读取转 SVG——轨迹语义已丢失，只剩像素
为什么在 iPhone 或 MacBook 上签名模糊、线条细得看不见
高 DPI 屏幕（window.devicePixelRatio > 1）下，Canvas 默认按 CSS 像素渲染，但物理像素密度翻倍，导致线条被“拉稀”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 获取设备像素比：
const dpr = window.devicePixelRatio || 1 - 放大 canvas 的
width/height属性（不是 CSS 宽高）：canvas.width = canvas.offsetWidth * dpr - CSS 设为固定尺寸：
canvas.style.width = '300px'; canvas.style.height = '150px'; - 最后调用
ctx.scale(dpr, dpr)，让绘图坐标系与设备像素对齐 - 漏掉
ctx.scale是最常被忽略的一步，光改 width/height 不生效
实际嵌入 HTML 编辑器时，最易被绕开又最难排查的问题是：DOM 挂载时机 + 高 DPI 缩放 + 坐标归一三者没同步处理。任一缺失都会导致签名位置漂移、线条断续或模糊成虚线。
