通用 Canvas 网格排版引擎

字帖和练习纸为什么难做

米字格、田字格、回宫格这类学习纸，难点不在「画几条线」，而在坐标一致：外框实线、内辅助虚线、线宽与整数像素对齐，以及汉字在格内视觉居中。还要在小程序或浏览器里按 A4 1240×1754（150dpi） 出图，缩放只改 canvas.style，不能动 canvas.width/height，否则导出会糊。拼音若手工标，排版成本更高。

引擎在做什么

本技能提供 references/grid-engine.js：纯函数、零 DOM 依赖的 Canvas 2D 模块，浏览器与微信小程序共用同一套算法。

• 网格：覆盖文档所述 13 种教育网格（含米字格、田字格等），统一设计令牌（如 gridLine、innerDash）与绘制顺序，顺序不可颠倒。
• 文字：drawCharInCell 一类接口把汉字画进格子；需显式设 ctx.font、ctx.textBaseline='middle'，避免字偏上或模糊。
• 验证：附 minimal-grid.html 可直接预览；selftest.js 在 Node 侧跑布局与排版数学自测（不依赖真实绘制环境）。

典型流程：给 canvas 设好内部分辨率 → 按顺序 drawGrid → 逐格写字/标拼音 → 导出 PNG，或与多页 PDF、SVG 复刻类技能组合成「画 → 复刻 → 导出」链路。

边界与注意

• 引擎只负责画；PDF 合成、SVG 模板复刻需配合同工具链其它技能。
• Node 自测验证的是数学与布局，不能替代真机上的字体与 DPR 目测。
• 字体缺失会回退系统 serif，布局仍成立；正式环境应用 wx.loadFontFace 或 @font-face 替换。
• 小程序侧记得 canvas.width = cssW * dpr；线宽用偶数、坐标取整，减少发虚的斜线。