JavaScript Canvas 绘图需按顺序控制2D上下文：先确保canvas已加载并获取getContext('2d')，再设置尺寸（width/height非CSS）、设样式、建路径（beginPath+绘图命令）、最后fill/stroke；动画靠requestAnimationFrame循环清屏重绘。
要用 JavaScript 在 Canvas 上绘图，核心不是“调用一个函数就出图”，而是按顺序控制 2D 渲染上下文——获取它、设状态、建路径、再渲染。漏掉任意一环（比如没调用 fill() 或忘了 beginPath()），画布上什么都不会显示。
拿到可用的 2D 上下文
必须先确保 <canvas> 元素已加载进 DOM，再调用 getContext('2d')：
- 检查返回值是否为
null，避免浏览器不支持或参数写错（如写成'2D'或'webgl'） - 推荐在
DOMContentLoaded后执行，或把脚本放在</body>前 - 同一个 canvas 不建议反复调用
getContext('2d')，它不会报错但可能掩盖状态混乱
正确设置画布尺寸
canvas.width 和 canvas.height 是实际绘图分辨率（像素数），不是 CSS 样式：
Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）
下载
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
- 务必通过 JS 或 HTML 属性显式设置，不能只靠 CSS；否则默认 300×150，图形会拉伸模糊
- 响应式场景下，应监听
resize事件，重设width/height并重新绘制 - 适配高清屏需结合
window.devicePixelRatio：放大像素尺寸 + 用ctx.scale(dpr, dpr)对齐逻辑坐标
画图形的关键三步
Canvas 是状态机模型，所有矢量图形都遵循“设样式 → 建路径 → 渲染”流程：
立即学习“Java免费学习笔记（深入）”；
- 矩形快捷法：
ctx.fillRect(x, y, w, h)（填充）、ctx.strokeRect(x, y, w, h)（描边），不走路径，直接生效 - 圆/弧/多边形等路径类图形：必须先
ctx.beginPath()，再用moveTo()、lineTo()、arc()构建，最后fill()或stroke() - 每次开始新图形前都应调用
beginPath()，否则上次路径残留，stroke()会重复画一堆线 - 角度单位是弧度（如
Math.PI * 2表示整圆），不是度数
动画与清屏的基本逻辑
Canvas 没有内置动画机制，动画靠循环“清空→重绘”实现：
- 用
requestAnimationFrame驱动，比setInterval更流畅、更省资源 - 每帧开头调用
ctx.clearRect(0, 0, canvas.width, canvas.height)清屏（比重置width轻量且可控） - 用变量控制位置/颜色/大小，在重绘时使用更新后的值
- 需要局部擦除或保留背景时，可只清指定区域，而非全屏
