Canvas 学习纸网格渲染引擎

> 教备神器 · 工具模块。纯前端 Canvas 2D，零依赖，浏览器与微信小程序通用。

这是什么（给人看）

做字帖、练习纸、可打印学习用纸时，最麻烦的是把"米字格/田字格/回宫格"等网格画准、把汉字居中、把拼音自动标好。本技能给你一套**开箱即用的网格引擎**：导入 `references/grid-engine.js`，调几个函数就能渲染任意网格 + 居中汉字，直接导出 PNG 或接 PDF。老师、教辅、国学机构做纸质练习必备。

何时使用

坐标系与令牌（AI 必读）

核心函数签名（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

// 逐字顺排：空格跳格、满列换行（首格左上角起点）

GridEngine.layoutCharacters(text, { startX, startY, gridSize, cols, rows })

```

绘制顺序（不可颠倒）

```

1. ctx.fillStyle=背景 → fillRect 覆盖全画布

2. drawGrid（网格线） ← 网格在最底层

3. drawCharInCell（文字） ← 文字在最上层

4. 导出图片（toDataURL / wx.canvasToTempFilePath）

```

常见坑（自动规避）

| 坑 | 正确做法 |

|----|----------|

| 文字模糊 | 先 `ctx.font='48px serif'` 再 `fillText`；小程序 `canvas.width = cssW*dpr` |

| 文字偏上 | 手动 `ctx.textBaseline='middle'` |

| 线不直 | `lineWidth` 用偶数、坐标用整数 |

| 导出空白 | 绘制前先给 `canvas.width/height` 赋值 |

| 边框撑爆 | `box-sizing:border-box`；网格坐标用 px 不混 rpx |

自测

```bash

node references/selftest.js # 验证布局/图元/排版数学，PASS 方可交付

```

引用文件

注意事项

教备神器 Canvas 工具链（组合使用）

本技能是「教备神器 · Canvas 工具链」的一环，四件组合覆盖「画 → 复刻 → 导出 → 验证」完整闭环：

完整方案与演示见「教备神器 Canvas 工具链落地页」（链接发布后回填）。