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 吹吹水咯

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