Canvas绘图需先获取2D上下文、设置状态、逐条发出指令；漏掉beginPath()或stroke()/fill()则图形不显示；drawRect不存在，应rect()+stroke()/fill()；需确保DOM加载完成、正确设置canvas宽高、适配高清屏；路径需显式描边或填充才可见；drawImage需注意参数顺序和图片加载状态；Canvas是状态机，应合理使用save()/restore()。
Canvas 绘图不是“调用一个函数就画出来”，而是需要先获取上下文、设置状态、再逐条发出绘制指令——漏掉 beginPath() 或忘记 stroke()/fill()，图形就完全不会显示。
怎么拿到能画画的上下文对象
必须通过 getContext('2d') 获取 2D 渲染上下文；用 getContext('webgl') 是另一套逻辑，不能混用。注意：同一个 <canvas> 元素只应调用一次 getContext，重复获取不会报错，但可能掩盖状态混乱问题。
常见错误：canvas.getContext('2d').drawRect(...) —— drawRect 根本不存在，正确方法是 rect() + stroke() 或 fill()。
实操建议：
立即学习“Java免费学习笔记（深入）”；
- 检查 DOM 是否加载完成，避免在
document.querySelector('canvas')返回null时直接调用getContext - 用
canvas.width和canvas.height设置绘图区域（不是 CSS 的style.width），否则图像会拉伸或模糊 - 若需高清屏适配，得手动缩放 canvas 像素比，CSS 尺寸不变，仅放大
width/height属性值
为什么画了线却看不见
Canvas 不自动渲染路径，所有绘图操作（moveTo、lineTo、arc 等）只是把指令记进当前路径，真正显示靠 stroke()（描边）或 fill()（填充）。没调用它们，等于写了代码但没执行。
另一个高频原因：路径未闭合且填充色透明，或描边宽度为 0（lineWidth = 0 在多数浏览器下不可见）。
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
实操建议：
立即学习“Java免费学习笔记（深入）”；
- 每次开始新图形前，加
ctx.beginPath()—— 否则上次路径残留，stroke()会把所有旧线一起画出来 - 确认
ctx.strokeStyle/ctx.fillStyle已设为非透明色，例如'#000'或'rgba(0,0,0,1)' - 设置描边宽度至少为
1：ctx.lineWidth = 1
drawImage 怎么总画歪或截断
drawImage() 有 3 种参数形式，最容易出错的是 9 参数版本（带裁剪和缩放）；传错顺序或数值会导致图像偏移、翻转、只画一小块。
最常用的是 5 参数版：drawImage(image, dx, dy, dWidth, dHeight)，其中 dx/dy 是目标画布上的左上角坐标，dWidth/dHeight 是最终绘制尺寸 —— 它们和图片原始宽高无关。
实操建议：
立即学习“Java免费学习笔记（深入）”；
- 确保
image已加载完成（监听img.onload），否则drawImage静默失败 - 用 3 参数版
drawImage(img, x, y)时，图片按原始尺寸绘制；若 canvas 尺寸小，图片会溢出不可见 - 调试时临时加
ctx.rect(dx, dy, dWidth, dHeight); ctx.stroke();画个框，确认目标区域是否符合预期
Canvas 是状态机模型，不是声明式 API。颜色、线宽、字体、变换矩阵……全都共享同一套上下文状态。画复杂图形时，别依赖“上一步设过”，该保存用 ctx.save()，该重置用 ctx.restore()，否则某次旋转会影响后面所有文字位置。
