必须先用 getContext('2d') 获取 CanvasRenderingContext2D 对象才能绘图，否则调用 fillRect 等方法会报错；fillRect 填充矩形，strokeRect 仅描边，二者样式不共享；Canvas 尺寸应通过 width/height 属性设置，而非 CSS；动画中需每帧 clearRect 并合理管理状态。
怎么用 getContext('2d') 获取绘图上下文
不拿到上下文，canvas 标签就是一张白纸，啥也画不了。必须先用 getContext('2d') 才能调用绘图方法。
常见错误：直接对 <canvas></canvas> 元素调用 fillRect 或 stroke —— 这会报 TypeError: canvas.fillRect is not a function。
- 确保 DOM 已加载完成，再获取元素（比如放在
DOMContentLoaded里或 script 放在 body 底部） -
getContext('2d')返回的是一个 CanvasRenderingContext2D 对象，所有绘图操作都靠它 - 如果传错参数（如
'webgl'但浏览器不支持），会返回null，记得加判断
画矩形时 fillRect 和 strokeRect 的区别在哪
这两个函数看着像，行为却完全不同：一个填满，一个只描边。
容易踩的坑是混淆默认样式 —— fillRect 默认用黑色实心填充，strokeRect 默认用黑色 1px 描边，但它们**不共享**颜色、线宽等设置。
立即学习“Java免费学习笔记（深入）”；
-
fillRect(x, y, width, height)：从 (x,y) 开始画实心矩形 -
strokeRect(x, y, width, height)：只画矩形边框，内部透明 - 改填充色要用
ctx.fillStyle = '#f00'，改描边色要用ctx.strokeStyle = '#00f' - 改线宽必须在
strokeRect前设ctx.lineWidth = 3，否则无效
为什么画了线却看不见？检查这三点
最常见原因不是代码写错，而是 canvas 尺寸和 CSS 尺寸混了。
Canvas 是位图，它的绘制分辨率由 width 和 height 属性决定；而 CSS 的 width/height 只是拉伸显示区域 —— 拉伸后图像会模糊或缩成一团。
- 别用 CSS 设置 canvas 大小，改用 HTML 属性：
<canvas width="400" height="300"></canvas> - 如果真要响应式，得用 JS 动态同步：读取
canvas.clientWidth，再赋给canvas.width和canvas.height - 画完记得调用
ctx.beginPath()，否则多条路径会连在一起，导致意外连线或填充错乱
requestAnimationFrame 画动画时要注意什么
它不是“让 canvas 动起来”的银弹，只是提供一帧时机；真正动不动，取决于你怎么清屏、重绘、更新状态。
漏掉清屏是最典型问题 —— 每帧都在原图上叠加，结果满屏残影。
- 每帧开头通常要
ctx.clearRect(0, 0, canvas.width, canvas.height) - 避免在循环里反复创建路径对象或临时数组，会触发 GC，卡顿明显
- 如果只是简单移动图形，用
transform（如ctx.translate(x, y)）比重绘整个形状更轻量 -
requestAnimationFrame回调函数接收一个时间戳参数，可用于做匀速运动（而非依赖setInterval）
