rect()是canvas中添加矩形子路径的快捷方法，参数为rect(x,y,width,height)，隐含closepath()效果，需配合fill()或stroke()才能显示，且必须在beginpath()后调用。
在 HTML5 Canvas 中，rect() 是一个直接向当前路径添加矩形子路径的快捷方法，它不会自动绘制，只是把矩形轮廓加入路径（类似 moveTo() + lineTo() 的组合），后续需配合 stroke() 或 fill() 才能显示。
rect() 的基本用法和参数
rect(x, y, width, height) 接收四个参数：
- x：矩形左上角的横坐标（相对于 canvas 原点）
- y：矩形左上角的纵坐标
- width：矩形宽度（向右延伸）
- height：矩形高度（向下延伸）
调用后，该矩形会作为闭合子路径加入当前路径 —— 它隐含了 closePath() 效果，即自动连接回起点，无需手动调用。
与手动绘制矩形路径的区别
用 rect() 相当于写：
moveTo(x, y); lineTo(x + width, y); lineTo(x + width, y + height); lineTo(x, y + height); closePath();
但 rect() 更简洁、性能略优，且语义明确。注意：它不改变当前绘图位置（current point），但会重置路径起始点为矩形左上角，因此连续调用多个 rect() 不会首尾相连。
实际使用时的关键细节
- 必须在
beginPath()之后调用，否则会累加到上一个路径中 - 可与其他路径命令混用（如先
arc()再rect()），所有子路径共用同一笔触/填充样式 - 若只调用
rect()但没执行fill()或stroke()，页面上看不到任何内容 - 想绘制空心矩形？用
stroke()；实心？用fill()；两者都用？先fill()再stroke()（避免描边被填充遮盖边缘）
一个完整示例
画一个带描边的蓝色实心矩形：
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.rect(50, 30, 120, 80); // 添加矩形子路径
ctx.fillStyle = 'blue';
ctx.fill();
ctx.strokeStyle = '#333';
ctx.lineWidth = 2;
ctx.stroke();前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
