javascript canvas 绘图需按顺序控制2d上下文：先确保canvas已加载并获取getcontext('2d')，再设置尺寸（width/height非css）、设样式、建路径（beginpath+绘图命令）、最后fill/stroke；动画靠requestanimationframe循环清屏重绘。

要用 JavaScript 在 Canvas 上绘图，核心不是“调用一个函数就出图”，而是按顺序控制 2D 渲染上下文——获取它、设状态、建路径、再渲染。漏掉任意一环（比如没调用 fill() 或忘了 beginPath()），画布上什么都不会显示。

Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）

用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。

下载

拿到可用的 2D 上下文

必须先确保 <canvas></canvas> 元素已加载进 DOM，再调用 getContext('2d')：

• 检查返回值是否为 null，避免浏览器不支持或参数写错（如写成 '2D' 或 'webgl'）
• 推荐在 DOMContentLoaded 后执行，或把脚本放在

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南