rect()仅定义路径需配合fill()/stroke()渲染，fillRect()直接填充绘制；前者适合路径复用与组合，后者适用于快速绘制单色矩形，性能更优。
Canvas 中的 rect() 和 fillRect() 都能画矩形，但作用不同：前者只定义路径，需配合 stroke() 或 fill() 才能显示；后者一步到位，直接填充绘制。
rect()：定义路径，不自动渲染
rect(x, y, width, height) 在当前路径中添加一个矩形子路径，但不会立刻画出来。必须调用 stroke()（描边）或 fill()（填充）才会真正显示。
- 适合需要复用路径、叠加描边+填充、或与其他路径组合的场景
- 调用前建议用
beginPath()清空旧路径，避免意外连接 - 例如：先
rect(10, 10, 100, 50)，再fill()→ 填充矩形；接着stroke()→ 同时描边
fillRect()：一步填充，最常用
fillRect(x, y, width, height) 省去路径操作，直接在指定位置绘制并填充实心矩形。无需 beginPath() 或 fill()，简单高效。
- 适合快速绘制单色色块、UI 背景、游戏砖块等
- 不能设置圆角或描边，如需描边得额外用
strokeRect() - 多次调用互不影响，无路径累积问题
颜色与样式控制
填充和描边颜色由 fillStyle 和 strokeStyle 控制，可设为颜色字符串、渐变或图案。
-
ctx.fillStyle = '#3498db'→ 影响fill()和fillRect() -
ctx.strokeStyle = 'red'→ 影响stroke()和strokeRect() -
ctx.lineWidth = 2→ 设置描边粗细，对stroke()和strokeRect()生效
实际使用建议
日常开发中，优先选 fillRect() 和 strokeRect() 处理简单矩形；只有需要路径操作（比如裁剪、复合、动画路径缓存）时才用 rect() + fill()/stroke()。
- 避免混用：不要对同一
rect()路径反复fill()，容易因未重置路径导致异常 - 性能注意：大量矩形绘制时，
fillRect()比路径方式更快 - 坐标理解：
x、y是左上角起点，Canvas 坐标原点在画布左上角
