13listed

# Canvas 学习纸网格渲染引擎 > 教备神器 · 工具模块。纯前端 Canvas 2D，零依赖，浏览器与微信小程序通用。 ## 这是什么（给人看） 做字帖、练习纸、可打印学习用纸时，最麻烦的是把"米字格/田字格/回宫格"等网格画准、把汉字居中、把拼音自动标好。本技能给你一套**开箱即用的网格引擎**：导入 `references/grid-engine.js`，调几个函数就能渲染任意网格 + 居中汉字，直接导出 PNG 或接 PDF。老师、教辅、国学机构做纸质练习必备。 - 已附 `minimal-grid.html`：浏览器打开即见效果（米字格 + 12 字）。 - 已附 `selftest.js`：Node 跑通布局/图元/排版数学自测，证明算法靠谱。 ## 何时使用 - "生成一张米字格字帖" / "做田字格练习纸" / "画 13 种网格" - 小程序里要把文字居中画进格子、自动标拼音 - 需要 A4 1240×1754 标准分辨率输出 ## 坐标系与令牌（AI 必读） - **A4 内部分辨率固定 1240×1754（150dpi）**，与 SVG 源 `viewBox 21000×29700` 对应，换算 `SVG→px ≈ 0.0590476`。 - **显示缩放用 `canvas.style.width/height`**，绝不改 `canvas.width/height`（否则导出模糊）。 - **设计令牌** `TOKENS`：`green #07C160`、`black #2C2C2C`、`red #CC1414`、`blue #2B5FD9`、`gridLine #BBBBBB`、`innerDash #CCCCCC`、`pinyin #999999`。 - **内部辅助线统一虚线** `setLineDash([6,4])`、线宽 1、色 `#CCCCCC`；外框线用实线。 ## 核心函数签名（AI 直接调用） ```javascript // 布局：返回 { startX, startY, cells:[{row,col,x,y,size}] }，自动水平居中 GridEngine.computeLayout({ gridSize, cols, rows, margin, pageW?, pageH?, startY? }) // 单格网格图元（局部坐标）：支持 mizi/tianzi/huigong/jiugong/fangge/ // hengxian/sixian/wuge/mizihuigong/tianzisidian/dianzhen/huangjinyuan GridEngine.gridSegments(type, size) // -> [{t:'line'|'dot'|'circle', ...}] // 绘制单格网格（需 2D ctx） GridEngine.drawGrid(ctx, type, cell, { color?, lineWidth? }) // 格内居中绘字（自动按宽度缩放，不溢出）；可带拼音（格上 1/4 区） GridEngine.drawCharInCell(ctx, char, cell, { font?, color?, pinyin? }) // 字号自适应：不超过格短边 0.85 GridEngine.fitFontSize(char, cellSize, ctx, baseFont) // -> px // 逐字顺排：空