Canvas中绘制矩形最常用、最直接的方式是strokeRect和fillRect：前者绘制仅描边的矩形，受strokeStyle和lineWidth控制；后者绘制填充矩形，颜色由fillStyle决定；二者参数均为(x,y,width,height)，调用即生效，不依赖路径。
Canvas 中绘制矩形最常用、最直接的方式就是 strokeRect 和 fillRect。它们不依赖路径，调用即生效，适合快速画边框或实色块。
strokeRect 绘制描边矩形
它只画矩形轮廓，不填充内部，线条样式由 ctx.strokeStyle 和 ctx.lineWidth 控制。
- 参数顺序固定：x（左上角横坐标）、y（左上角纵坐标）、width（宽）、height（高）
- 不会影响当前路径，后续
stroke()或fill()对它无效 - 适合做 UI 边框、区域划分线、临时标注框等
fillRect 绘制填充矩形
它直接画出实心矩形，颜色由 ctx.fillStyle 决定，同样不走路径流程。
- 参数与 strokeRect 完全一致，仅行为不同
- 绘制后像素立即写入，无法通过路径操作（如 clip、transform 后再 fill）统一控制
- 常用于背景色块、按钮底色、像素级绘图（如游戏地图格子）
两者配合使用实现“描边+填充”效果
虽然它们彼此独立，但位置参数一致，可以叠加使用来模拟带边框的实心矩形：
- 先调用
fillRect(x, y, w, h)填充主体 - 再调用
strokeRect(x, y, w, h)描边外框 - 注意描边会有一半落在矩形外侧，若需精确对齐，可微调坐标或用
rect() + stroke() + fill()路径方式
和路径类方法（如 rect()）的区别
strokeRect/fillRect 是“立即执行型”，而 rect(x,y,w,h) 只是把矩形添加进当前路径，必须搭配 stroke() 或 fill() 才能显形。
- 路径方式支持更多操作：比如裁剪（
clip()）、变换（scale/rotate）、复合图形复用 - 立即方法更轻量，适合高频、简单、重复绘制场景（如动画帧中的 UI 元素）
- 清除时统一用
clearRect()，它和前两者一样，也是立即生效的区域擦除操作
