fillRect()和strokeRect()直接绘制实心或空心矩形，无需路径操作且立即生效；rect()仅创建闭合路径，须配合fill()或stroke()才能显示，适用于复合路径场景。
直接用 fillRect() 或 strokeRect()，别碰 rect() ——除非你真需要把它塞进复合路径里。
fillRect() 和 strokeRect() 是最简方案
这两个方法传入左上角坐标、宽高，立刻出图，不依赖路径状态，也不需要手动调 beginPath() 或 fill()/stroke()。
-
fillRect(x, y, width, height)画实心矩形，颜色由ctx.fillStyle控制 -
strokeRect(x, y, width, height)画空心矩形，线条样式由ctx.strokeStyle和ctx.lineWidth决定 - 它们性能更好：跳过路径构建和解析，浏览器可直接光栅化
- IE9+ 全平台兼容，和
rect()一致，但容错率高得多
rect() 不是“画矩形”，它是“建路径”
调用 rect() 后 canvas 什么都不会显示——它只是把一个闭合矩形路径加到当前路径中，必须紧接着调用 fill() 或 stroke() 才能看见。
- 常见错误：
ctx.rect(10, 10, 100, 50);单独执行 → 页面空白，控制台无报错 - 正确写法：
ctx.beginPath(); ctx.rect(10, 10, 100, 50); ctx.fill(); - 如果之前已绘制过图形，漏掉
beginPath()会导致新旧路径叠加，填充/描边范围异常 -
rect()生成的是独立闭合路径，不能像lineTo()那样追加其他线段再闭合
为什么 fillRect() 画出来是黑的？
因为 ctx.fillStyle 和 ctx.strokeStyle 是全局状态，不会随方法切换自动重置。画完一个红框再画蓝框，不改 fillStyle 就还是红色；没设 strokeStyle 就默认用黑色描边。
立即学习“前端免费学习笔记（深入）”；
- 实心矩形颜色由
ctx.fillStyle决定（支持颜色、渐变、图案） - 空心矩形线条由
ctx.strokeStyle+ctx.lineWidth共同控制 - 圆角效果不能靠
fillRect()直接实现，得用lineJoin = 'round'配合strokeRect()，或手绘路径 - 清除区域用
clearRect(x, y, w, h)，它会把指定范围设为全透明，不是“擦掉”，而是覆盖
真正容易被忽略的是：canvas 没有“撤销”或“图层”概念，所有绘制都是像素覆盖。画错不是重来一次的问题，而是状态管理没跟上——比如忘了重置 fillStyle，或者重复调用 stroke() 导致线条变粗。每次调用前，先想清楚你要的到底是“一次性结果”，还是“路径的一部分”。
