fillRect()和strokeRect()是最直接的矩形绘制方法，分别用于绘制实心和空心矩形，需先获取2D上下文并设置fillStyle/strokeStyle；clearRect()仅将区域设为透明而非真正擦除；transform会影响矩形位置与尺寸，建议用save()/restore()隔离；批量绘制时应避免循环中频繁修改样式以提升性能。
用 fillRect() 和 strokeRect() 画实心/空心矩形最直接
HTML5 <canvas> 本身不渲染任何图形，必须通过 JavaScript 的 2D 上下文调用绘图方法。画矩形最基础的两个函数就是 fillRect()（填充）和 strokeRect()（描边），它们都接受四个参数：x、y、width、height，单位是像素，坐标原点在左上角。
常见错误是忘了获取上下文或没设置样式：
- 没调用
getContext('2d')就直接调fillRect()→ 报错TypeError: ctx.fillRect is not a function - 只调
strokeRect()但没设ctx.strokeStyle→ 矩形不可见（默认为黑色，但在深色背景或透明 canvas 上容易误判） - 坐标写反成
width、height、x、y→ 图形出现在意料之外的位置
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 实心红色矩形
ctx.fillStyle = '#f00';
ctx.fillRect(10, 20, 120, 80);
// 空心蓝色边框（不填充）
ctx.strokeStyle = '#00f';
ctx.lineWidth = 2;
ctx.strokeRect(150, 20, 120, 80);
clearRect() 不是“擦除”，而是“涂成透明”
很多人以为 clearRect() 是撤销或删除已有图形，其实它只是把指定区域重置为完全透明（alpha=0），相当于“盖一层透明色”。这对动画清屏有用，但要注意：
- 如果 canvas 背景是 body 的浅灰色，
clearRect()后该区域会透出灰色，看起来像“擦掉了”，实际是透底 - 如果 canvas 设置了
style="background: #eee"，clearRect()不会影响这个 CSS 背景，只清画布像素 - 想彻底恢复纯白背景，得先
clearRect()，再用fillRect()填白色
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清全画布 ctx.fillStyle = '#fff'; ctx.fillRect(0, 0, canvas.width, canvas.height); // 再填白
矩形位置和尺寸受 transform 影响，但不是所有场景都需要
如果你用 ctx.translate()、ctx.scale() 或 ctx.rotate() 改变了坐标系，后续所有 fillRect() 的 x/y 都按新坐标系解释。比如：
立即学习“前端免费学习笔记（深入）”；
-
ctx.translate(50, 50)后，fillRect(0, 0, 100, 50)实际画在画布 (50, 50) 位置 -
ctx.scale(2, 1)后，fillRect(10, 10, 30, 20)会拉宽一倍，变成宽 60、高 20 - 旋转后画矩形会倾斜——但
fillRect()本身不支持旋转参数，必须靠transform配合
多数静态矩形不需要 transform；一旦用了，记得用 ctx.save() / ctx.restore() 隔离影响范围，否则后续绘图全乱。
性能提示：批量矩形别用循环反复调 fillRect()
画几十个以上矩形时，频繁调用 fillRect() 可能触发过多绘制状态切换。更高效的方式是：
- 统一设置
fillStyle，再批量调用（避免每次改样式） - 若矩形尺寸/颜色一致，考虑用
putImageData()或createPattern()批量填充（适合网格类场景） - 对动态更新的大量矩形（如游戏地图块），优先用
requestAnimationFrame+ 单次清屏+重绘，而非逐个clearRect()
浏览器对 fillRect() 有底层优化，但前提是别在循环里反复改 fillStyle 或 globalAlpha。
getBoundingClientRect() + 事件坐标转换）、以及和其它图形（如文字、路径）的层叠顺序。这些细节比函数名更容易卡住进度。 
