用Canvas绘制网格背景的核心是循环画线并精准对齐坐标：垂直线x坐标设为i+0.5、水平线y坐标设为j+0.5以实现1像素抗锯齿效果，分两轮for循环分别绘制行列线，提前设置strokeStyle和lineWidth，避免重叠边框与性能损耗。
用 Canvas 绘制网格背景，核心就是用循环画线——垂直线画一列，水平线画一行，再统一设置样式。关键不在“多复杂”，而在“坐标算准、线条抗锯齿、性能不卡”。
网格线坐标的对齐技巧
Canvas 像素渲染容易模糊，尤其细线（比如 lineWidth=0.5）若落在整数坐标上，浏览器会自动做半像素插值，导致发虚。解决办法是把所有线条偏移 0.5 像素：
- 垂直线 x 坐标设为 i + 0.5（i 是步长倍数），例如
moveTo(10.5, 0) - 水平线 y 坐标同理，设为 j + 0.5，如
lineTo(canvas.width, 20.5) - 避免用
fillRect清空再重绘；直接clearRect后重画更轻量
循环结构的两种写法对比
推荐用 for 循环分两轮绘制，比嵌套循环清晰且易维护：
Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）
下载
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
- 第一轮：从 stepX 开始，每次加 stepX，画到
canvas.width为止（含右边界线） - 第二轮：从 stepY 开始，每次加 stepY，画到
canvas.height为止（含底边界线） - 起始值别从 0 开始——否则第一条线和 canvas 左/上边框重叠，视觉上变粗
样式与性能兼顾的设置
网格常作背景，需轻量、透明、不抢眼：
-
lineWidth 控制在 0.3–0.8 之间，
0.5是多数场景的平衡点 -
strokeStyle 推荐 rgba 颜色，如
"rgba(0,0,0,0.1)"或"#ddd" - 绘制前调用
ctx.beginPath()，绘制后不用closePath()（线段无需闭合） - 避免在循环里反复设
strokeStyle或lineWidth，提前提好即可
适配动态尺寸的处理要点
当 canvas 宽高随窗口变化时，网格不能只靠初始尺寸计算：
- 监听
resize事件，重新获取canvas.width和canvas.height - 用
Math.ceil(canvas.width / stepX)算最大列数，确保右侧不留白 - 若需保留边缘留白（如加内边距），可在循环起始和终止处减去 padding 值
