Canvas网格吸附需手动计算坐标对齐，核心是用Math.round或Math.floor实现四舍五入/左对齐吸附，并结合视口偏移、拖拽偏移量、键盘微调等交互细节确保平滑精准。
Canvas 实现网格吸附，核心是把鼠标坐标（或拖拽对象的中心/锚点）“对齐”到预设的网格间距上，再绘制或更新位置。这不是 Canvas 自带功能，需要手动计算，关键在坐标取整逻辑和良好的交互设计。
确定网格间距与原点偏移
网格通常从画布左上角（0, 0）开始，但实际中常需考虑视口偏移（如平移、缩放）或自定义起始点。吸附前先统一坐标系：
- 用 Math.round(x / gridSize) * gridSize 实现四舍五入吸附（最常用，居中感强）
- 用 Math.floor(x / gridSize) * gridSize 实现向左/向上吸附（适合左对齐布局）
- 若画布有平移（如 cameraX/cameraY），先将屏幕坐标转为世界坐标：worldX = screenX - cameraX，再吸附，最后转回绘制坐标
鼠标移动时实时吸附光标或预览元素
监听 mousemove，获取鼠标位置后立即计算吸附值，并用于绘制临时指示（如小方块、十字线）或更新待放置对象的位置：
- 获取鼠标相对于 canvas 的坐标（注意
getBoundingClientRect()补偿） - 转换为画布坐标（减去 canvas 左上偏移，除以 devicePixelRatio 若启用高清渲染）
- 对 x/y 分别执行吸附计算，例如：snappedX = Math.round(mouseX / 20) * 20（20px 网格）
- 清空 canvas 并重绘：先画网格线（可选），再画吸附后的预览图形
拖拽对象时保持吸附不跳变
拖拽起点往往不在网格上，直接吸附会导致“瞬移”。正确做法是记录初始偏移量（offsetX = startX - snappedStartX），后续位置按 snappedX = Math.round(mouseX - offsetX) / gridSize * gridSize 计算：
Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）
下载
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
立即学习“Java免费学习笔记（深入）”；
- 按下时（
mousedown）：计算并保存 dragOffsetX = currentMouseX - object.x - 移动时（
mousemove）：targetX = Math.round((mouseX - dragOffsetX) / gridSize) * gridSize - 这样对象会平滑跟随鼠标，同时始终落在网格点上
结合键盘微调（可选增强体验）
按住 Ctrl 或 Shift 键时临时关闭吸附，方便精细调整；或按方向键以 1px 或半网格步进移动，提升操作自由度：
- 监听
keydown，检测 event.ctrlKey 切换吸附开关 - 方向键响应中，根据是否吸附，决定步进值是 1 还是 gridSize / 2
- 注意：键盘移动也应走同一套吸附逻辑，保证状态一致
不复杂但容易忽略的是坐标转换精度和 offset 的时机——务必在拖拽开始瞬间计算偏移，而非首次移动时，否则首帧会跳动。
