fillRect()和strokeRect()不依赖路径，但混用路径方法时需先beginPath()；画圆必用arc()且角度单位为弧度；清除画布需适配像素比；样式设置必须在绘制前且无继承。
用 fillRect() 和 strokeRect() 画矩形，别漏掉 beginPath()
Canvas 绘图不是“设置属性后自动渲染”，而是基于路径（path）的命令式操作。画矩形看似简单，但新手常因忽略上下文状态导致颜色/线宽不生效或重叠渲染。
-
fillRect(x, y, width, height)直接填充，不依赖路径，也不受beginPath()影响 -
strokeRect(x, y, width, height)同理，直接描边，跳过路径管理 - 但如果你混用路径类方法（比如后面画圆），必须在调用
fillRect()前确认当前没有未闭合路径，否则可能意外填充不该填的区域 - 坐标
(x, y)是矩形左上角，不是中心点 —— 这和 CSS 的transform-origin或 SVG 的cx/cy习惯不同，容易偏移
画圆形必须用 arc()，startAngle 和 endAngle 单位是弧度
Canvas 没有 drawCircle() 这种快捷函数。所有圆/圆弧都靠 arc(x, y, radius, startAngle, endAngle, anticlockwise)，而角度单位是弧度，不是度数 —— 这是绝大多数人第一次画不出圆的直接原因。
- 完整圆：用
startAngle = 0、endAngle = 2 * Math.PI，别写360 - 画实心圆要配
fill()，且必须在arc()后立即调用；如果之前有未闭合路径，fill()可能连带填充其他部分 - 推荐固定写法：
ctx.beginPath(); ctx.arc(100, 100, 50, 0, Math.PI * 2); ctx.fill();
-
anticlockwise设为true会反转绘制方向，影响fillRule（极少用，一般保持默认false）
清除画布别只靠 clearRect()，注意像素比缩放后的失真
用 clearRect(0, 0, canvas.width, canvas.height) 看似清空，但如果 Canvas 被 CSS 缩放过（比如设了 style="width: 400px; height: 300px"），实际渲染会模糊或留残影。
- 根本原因是：Canvas 的
width/height属性是绘图缓冲区像素数，而 CSSwidth/height是显示尺寸。二者不一致就会拉伸 - 正确做法是先读取
canvas.clientWidth和canvas.clientHeight，再按设备像素比（window.devicePixelRatio）重设canvas.width/canvas.height - 清除前建议统一重置状态：
ctx.setTransform(1, 0, 0, 1, 0, 0); // 重置变换矩阵 ctx.clearRect(0, 0, canvas.width, canvas.height);
颜色和样式必须在绘制命令前设置，且无继承机制
Canvas 是“状态机”模型：fillStyle、strokeStyle、lineWidth 等都是全局状态，一旦设置就持续生效，直到被下一次赋值覆盖。它不像 SVG 或 DOM 那样有样式继承链。
立即学习“前端免费学习笔记（深入）”；
- 常见错误：先画矩形，再改
fillStyle，结果新颜色对已绘制内容无效 -
fillStyle支持颜色字符串（"#ff0"）、rgb()、rgba()，也支持CanvasGradient和CanvasPattern，但不能传 CSS 变量或 class 名 - 每次切换绘制类型（填充 → 描边）时，务必确认当前
fillStyle或strokeStyle是你想要的值，尤其在循环绘制不同图形时 - 没有“恢复上一个样式”的内置方法，如需频繁切换，建议手动缓存：
const oldFill = ctx.fillStyle;，用完再赋回
Canvas 的“基础”背后全是状态陷阱。最易忽略的不是怎么画，而是什么时候该 beginPath()、什么时候该 setTransform(1,0,0,1,0,0)、以及为什么明明改了 fillStyle 却没变色 —— 这些问题全藏在上下文状态里。
