p5.js 矩形rect绘制教程

点赞 + 关注 + 收藏 = 学会了

用 p5.js 绘制矩形有个很方便的方法：react()。这个简单的函数能帮我们画出普通矩形、圆角矩形，甚至在 3D 模式下调整细节。不过我们先从最基础的开始，一步步学会用它。

rect () 到底能做什么？

rect() 是 p5.js 里专门用来画矩形的函数。你可以用它画：

• 四个角都是直角的普通矩形（比如书本、手机屏幕）
• 四个角有弧度的圆角矩形（比如按钮、卡片）
• 甚至在 3D 模式下画有分段细节的矩形（新手先不用管这个，后面会简单提）

rect () 的核心参数：先搞懂这 4 个基础参数

画矩形最核心的是 4 个参数，少了它们可不行。先记住一句话：“确定位置，再定大小”。

参数说明：

• x：矩形左上角的「左右位置」（数字越大越靠右）
• y：矩形左上角的「上下位置」（数字越大越靠下）
• w：矩形的「宽度」（数字越大越宽）
• h：矩形的「高度」（数字越大越高）

举个例子：如果想在画布上画一个 “左上角在 (50,50)，宽 200，高 100” 的矩形，代码就是 rect(50, 50, 200, 100)。

画圆角矩形（3 种常用方式）

普通矩形太 “方”？用 rect() 可以轻松画圆角，只需要加几个参数控制圆角半径（半径越大，角越圆）。

1、四个角圆角相同（最简单）

如果想让四个角的圆角一样大，只需要在基础 4 个参数后加第 5 个参数（圆角半径）。

参数：rect(x, y, w, h, 圆角半径)
比如：rect(50, 50, 200, 100, 20)（四个角都是 20 像素的圆角）

2、四个角圆角不同（单独控制）

如果想让每个角的圆角不一样（比如左上角圆、右下角直角），可以用 8 个参数，后 4 个分别对应四个角的半径（顺序：左上→右上→右下→左下）。

参数：rect(x, y, w, h, 左上圆角, 右上圆角, 右下圆角, 左下圆角)

比如：rect(50, 50, 200, 100, 30, 0, 15, 0)
效果：左上角 30 像素圆角，右上角直角（0），右下角 15 像素圆角，左下角直角（0）

3、省略参数也能画（自动继承）

如果后 4 个圆角参数没写全，没写的会 “继承” 最后一个写了的参数。
比如：rect(50, 50, 200, 100, 20, 10)
相当于：左上 20，右上 10，右下 10（继承右上），左下 10（继承右上）

动手试试

画一个普通矩形

灰色背景的直角矩形。

function setup() {createCanvas(400, 300); // 创建一个400x300的画布
}function draw() {background(240); // 画布背景色（浅灰）rect(50, 50, 200, 100); // 左上角(50,50)，宽200，高100的矩形
}

画一个四个角都圆的矩形

浅蓝色的圆角矩形，四个角圆润。

function setup() {createCanvas(400, 300);
}function draw() {background(240);fill(135, 206, 235); // 填充浅蓝色rect(50, 50, 200, 100, 20); // 四个角都是20像素圆角
}

画一个 “左右不对称” 的圆角矩形

橙色矩形，左上角和左下角是 30 像素圆角，右上角和右下角是直角（左右两边圆，上下两边直）。

function setup() {createCanvas(400, 300);
}function draw() {background(240);fill(255, 165, 0); // 填充橙色// 左上30，右上0（直角），右下0（继承右上），左下30（继承右上？不！最后写的是右上0，所以左下0？不对，再看：// 参数是x,y,w,h,tl,tr,br,bl。这里写了tl=30, tr=0，后面br和bl没写，所以br=0（继承tr），bl=0（继承tr）// 想让左下30，需要补全：rect(50,50,200,100,30,0,0,30)rect(50, 50, 200, 100, 30, 0, 0, 30); 
}

动态网格矩形

• 画布上有网格排列的矩形，颜色会随时间缓慢变化（从冷色调到暖色调流动）
• 鼠标移动时，矩形的圆角会跟着鼠标位置变化（鼠标越靠右，圆角越大）
• 矩形大小会轻微 “呼吸”（随时间缩放）
• 每个矩形的边框和填充色有层次感

function setup() {createCanvas(800, 600);// 提前设置渲染模式，减少刷新延迟frameRate(30); // 降低帧率到30（默认60，30更流畅不闪烁）
}function draw() {// 关键：用不透明背景，每次绘制完全覆盖上一帧（彻底消除残留）background(30); // 不透明深灰背景，不再用半透明叠加const cols = 10;const rows = 8;const gap = 6;const rectW = (width - gap * (cols + 1)) / cols;const rectH = (height - gap * (rows + 1)) / rows;// 限制鼠标位置（修复之前的问题）const safeMouseX = constrain(mouseX, 0, width);const safeMouseY = constrain(mouseY, 0, height);for (let i = 0; i < cols; i++) {for (let j = 0; j < rows; j++) {const x = gap + i * (rectW + gap);const y = gap + j * (rectH + gap);// 1. 鼠标距离交互（更平滑的缩放：用lerp让缩放过渡更慢）const rectCenterX = x + rectW/2;const rectCenterY = y + rectH/2;const distance = dist(safeMouseX, safeMouseY, rectCenterX, rectCenterY);// 缩放范围缩小（0.95-1.15），变化更平缓const targetScale = map(distance, 0, 200, 1.15, 0.95, true);// 用lerp让缩放从当前值慢慢过渡到目标值（平滑无跳变）let currentScale = lerp(0.95, targetScale, 0.2);// 2. 圆角变化（减慢速度，范围缩小）const cornerX = map(safeMouseX, 0, width, 0, 15); // 圆角最大15（之前25，更小更稳）const cornerY = map(safeMouseY, 0, height, 0, 10);const corner = cornerX + cornerY;// 3. 颜色变化（减慢流动速度，避免快速变色闪烁）const hue = (frameCount * 1 + i * 30 + j * 15) % 360; // 之前是*2，现在*1更慢fill(`hsla(${hue}, 70%, 75%, 0.9)`); // 明度略降，更柔和// 4. 边框（和填充色协调，不刺眼）stroke(`hsla(${hue}, 70%, 40%, 0.9)`);strokeWeight(1); // 边框变细，减少视觉干扰// 绘制矩形（参数更稳定）rect(x, y, rectW * currentScale, rectH * currentScale, corner);}}
}

---

以上就是本文的全部内容啦，想了解更多 P5.js 用法欢迎关注 《P5.js中文教程》。

也可以➕我 green bubble 吹吹水咯

点赞 + 关注 + 收藏 = 学会了