rect()定义矩形路径需配合fill()/stroke()才可见，clearrect()直接像素级擦除指定区域；二者常协作实现动画与交互，使用时需注意beginpath()调用、坐标变换影响及高dpi适配。
Canvas 的 rect() 和 clearRect() 是绘制与清除矩形区域最基础也最常用的两个方法，它们不直接渲染图形，而是操作路径或像素——一个负责“定义”矩形区域，另一个负责“擦除”指定区域内容。
rect()：定义路径矩形，需配合描边或填充才可见
rect(x, y, width, height) 在当前路径中添加一个矩形子路径，它本身不画出任何东西。必须调用 stroke()（描边）或 fill()（填充）才能真正显示出来。
- 坐标
(x, y)是矩形左上角在 canvas 坐标系中的位置 - 宽高为正值时向右、向下延伸；负值会反向，但通常避免使用负尺寸以防逻辑混乱
- 多次调用
rect()会累积路径，一次fill()可同时填充所有未闭合的矩形
例如：ctx.rect(10, 10, 80, 40);<br>
ctx.fillStyle = 'blue';<br>
ctx.fill();
这段代码绘制了一个蓝色实心矩形（10,10）起始、宽80高40。
clearRect()：精准擦除像素，不依赖路径
clearRect(x, y, width, height) 直接将指定矩形区域内所有像素重置为透明黑色（即完全清空），它不关心路径、不触发重绘逻辑，是真正的“像素级擦除”。
- 常用于动画中移除旧元素，比如让一个移动的小方块“消失”在上一帧位置
- 注意：它清除的是整个 RGBA 像素，包括背景色、半透明叠加、阴影等所有已绘制内容
- 若 canvas 背景是白色图片或颜色，
clearRect后该区域会变透明，可能露出页面背景——此时需手动重绘背景
rect() 与 clearRect() 的典型协作场景
二者常组合使用实现简单动画或交互反馈：
- 拖拽框：鼠标按下时记录起点，移动时用
clearRect()清掉上一帧虚线框，再用rect()+stroke()绘制新虚线框 - 高亮区域：用户划选一块区域，先
clearRect()擦除旧高亮，再用rect()+ 半透明fillStyle绘制新高亮 - 游戏UI刷新：血条变化时，只用
clearRect()清除旧血条区域，再重新绘制更新后的矩形进度
容易忽略的关键细节
这两个方法看似简单，但几个细节直接影响效果稳定性：
-
rect()添加路径后若未调用beginPath()，后续绘制可能意外连接到前一个路径（产生不需要的线条） -
clearRect()的坐标和尺寸是 canvas 像素坐标，不受scale()、translate()等变换影响——除非你已在上下文中应用了这些变换，那它清除的就是变换后的区域 - 在高 DPI 屏幕（如 Retina）上，若未做像素比适配，
clearRect()可能清除不完整，导致残留“脏像素”
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
