Canvas图形不显示需先检查getContext('2d')是否成功获取，确保DOM加载完成、canvas设width/height属性而非仅CSS，并判空ctx；坐标系原点在左上角；stroke()/fill()需配合路径API使用；高分屏需用devicePixelRatio缩放处理。
Canvas 画布没显示图形？先检查 getContext('2d') 是否调用成功
很多新手写完 drawRect() 或 fillRect() 却看不到东西，根本原因常是上下文获取失败——比如 DOM 还没加载完就操作了 canvas 元素，或元素本身没设宽高（CSS 设置的宽高不作用于绘图坐标系）。
- 务必在
DOMContentLoaded后获取canvas，或把脚本放</body>前 -
canvas的width和height属性必须用 JS 或 HTML 写死（如<canvas width="400" height="300"></canvas>），不能只靠 CSS 缩放，否则图形会模糊、坐标错乱 - 调用
getContext('2d')后要判空：if (!ctx) return;，避免静默失败
画矩形/圆形总在左上角？注意 Canvas 坐标系原点位置
Canvas 的 (0, 0) 永远是画布左上角，不是中心。所有 fillRect(x, y, w, h)、arc(x, y, r, ...) 的 x、y 都相对这个原点。新手常误以为它像 SVG 或 CSS 那样可居中定位。
-
fillRect(10, 10, 50, 30)是从左上往右下画，不是“以 (10,10) 为中心” - 想画圆在正中间？得算：
ctx.arc(canvas.width / 2, canvas.height / 2, 20, 0, Math.PI * 2) - 没有自动响应式：画布尺寸变了，必须手动重绘，不能靠 CSS transform 拉伸来“适配”
调用 stroke() 或 fill() 没反应？路径还没定义好
Canvas 是状态机模型，stroke() 和 fill() 不是独立命令，而是对「当前路径」的操作。如果没调用 beginPath() + moveTo()/lineTo()/arc() 等构建路径，它们就什么也不做。
- 每次新图形前建议加
ctx.beginPath()，否则旧路径可能被重复描边/填充 -
strokeRect()和fillRect()是快捷方法，不用路径；但stroke()/fill()必须搭配路径 API 使用 - 漏掉
closePath()可能导致多边形缺一边，尤其用lineTo()连线时
文字模糊、锯齿严重？别忽略 devicePixelRatio 缩放
在 Retina 或高分屏上，直接按 CSS 像素画图会导致内容发虚。因为浏览器用多个物理像素渲染一个 CSS 像素，而 Canvas 默认只按 CSS 尺寸分配缓冲区。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：用
window.devicePixelRatio放大画布的width/height属性，并用 CSS 把显示尺寸缩回原样 - 例如：CSS 设
canvas { width: 400px; height: 300px; }，JS 中则设canvas.width = 400 * dpr; canvas.height = 300 * dpr;，再用ctx.scale(dpr, dpr) - 不处理的话，
fillText()文字边缘会明显糊，细线会断续
事情说清了就结束
