深入探索 p5.js：绘制矩形的终极指南

2026-02-07 18:59:17 0条评论 1次阅读 0人点赞

你是否曾经想过，如何通过代码在画布上绘制出各种各样的图形？作为创意编程的核心基础，矩形是最简单却最强大的图形元素之一。在 p5.js 的世界里，rect() 函数不仅是绘制方块的简单工具，它背后其实隐藏着丰富的参数逻辑和绘图模式。

在这篇文章中，我们将深入探讨 p5.js 的 rect() 函数。我们将从最基本的用法开始，逐步深入到圆角定制、绘图模式控制以及性能优化等高级话题。无论你是刚刚接触 p5.js 的新手，还是希望巩固基础的开发者，我相信通过这篇文章，你都能对这个看似简单的函数有全新的认识，并能在你的项目中灵活运用。

1 矩形与 rect() 函数的基础
2 实战示例：从简单到复杂
3 进阶应用：交互与最佳实践
4 常见陷阱与性能建议
5 总结与后续步骤

矩形与 rect() 函数的基础

在开始写代码之前，让我们先理解一下我们在操作什么。在计算机图形学中，矩形是构成复杂界面的基石。从网页的按钮布局到游戏中的碰撞箱，矩形无处不在。在 p5.js 中，rect() 是一个内置函数，专门用于在画布上绘制这一形状。

语法剖析

rect() 函数非常灵活，它支持多种参数组合。最基础的调用形式如下：

rect(x, y, w, h)

但这只是冰山一角。完整的函数签名如下：

rect(x, y, w, h, [tl], [tr], [br], [bl])

或者，针对 WebGL 模式下的特殊用法：

rect(x, y, w, h, [detailX], [detailY])

让我们详细拆解一下这些参数的含义，因为理解它们是掌握绘图的关键：

x (Number): 矩形左上角（或者基准点）的 x 坐标。
y (Number): 矩形左上角（或者基准点）的 y 坐标。
w (Number): 矩形的宽度。
h (Number): 矩形的高度。
tl (Number): 可选。左上角的圆角半径。
tr (Number): 可选。右上角的圆角半径。
br (Number): 可选。右下角的圆角半径。
bl (Number): 可选。左下角的圆角半径。
detailX, detailY (Number): 仅 WebGL 模式。用于定义矩形在细分时的网格段数，这对于 WebGL 下的光照和纹理映射非常重要。

坐标系统的关键：rectMode()

在深入示例之前，我必须向你介绍一个非常重要的概念：绘图模式。默认情况下，INLINECODE9bb155ef 和 INLINECODEcbf856c8 定义的是矩形左上角的位置。但在实际开发中，有时候我们希望 INLINECODE2dd95834 和 INLINECODEf216b10c 代表矩形的中心点（比如在制作围绕中心旋转的动画时）。

我们可以使用 rectMode(mode) 函数来改变这一行为：

INLINECODE657ddf34: 默认模式。INLINECODE16791a98 是矩形的左上角。
INLINECODE52f27971: INLINECODE79269460 是矩形的一个角，w, h 被解释为对角角的坐标。
INLINECODE935d98ed: INLINECODE76b03f3e 是矩形的中心点。
INLINECODE4e16ccd6: INLINECODE450b44eb 是中心点，但 w, h 被视为矩形宽高的一半。

实战示例：从简单到复杂

让我们通过一系列实际的例子来看看这些参数是如何工作的。我建议你打开 p5.js 的在线编辑器，跟着我们一起编写代码。

示例 1：绘制基础矩形

最简单的起点。我们将创建一个画布，并在其中绘制一个标准的绿色矩形。

在这个例子中，我们会用到 INLINECODEa68974d2 来初始化画布，并在 INLINECODE0bff3ddb 中不断重绘矩形。

function setup() { 
    // 创建一个 400x300 像素的画布
    createCanvas(400, 300); 
} 
 
function draw() { 
    // 设置背景色为浅灰色 (RGB: 220, 220, 220)
    // 这样可以清除上一帧的内容，防止画面重叠
    background(220);
     
    // 定义颜色变量
    let c = color(‘green‘);
 
    // 使用 fill() 函数设置填充颜色
    fill(c);
   
    // 绘制矩形
    // x=50, y=50 (左上角位置)
    // w=300 (宽), h=200 (高)
    rect(50, 50, 300, 200);
}

代码解读：

这段代码非常直观。我们在坐标 (50, 50) 的位置开始，向右绘制 300 像素宽，向下绘制 200 像素高的矩形。background(220) 的作用类似于擦除黑板，如果你把它注释掉，移动矩形时你会看到拖影效果，这在某些创意效果中是有用的，但在基础绘图中通常需要清除。

示例 2：全局圆角矩形

尖锐的直角矩形看起来可能有些生硬。让我们尝试给它添加一些圆角。p5.js 让这变得极其简单，只需在宽度和高度之后添加一个参数即可。

function setup() { 
    createCanvas(400, 300); 
} 
 
function draw() { 
    background(220);
     
    let c = color(‘green‘);
    fill(c);
   
    // 绘制矩形，添加了第五个参数 30
    // 这表示四个角的圆角半径都为 30 像素
    rect(50, 50, 300, 200, 30);
}

代码解读：

当你添加第五个参数时，p5.js 会自动将其应用到矩形的四个角上。这是一种快速创建“按钮”或“卡片”风格 UI 的好方法。

示例 3：自定义每个角的圆角

如果你想创造出更具个性的形状怎么办？比如类似复古游戏机或特殊的标签纸形状？我们可以分别为四个角指定不同的圆角半径。

参数的顺序是：左上、右上、右下、左下。

function setup() { 
    createCanvas(400, 300); 
} 
 
function draw() { 
    background(220);
     
    let c = color(‘green‘);
    fill(c);
   
    // 绘制矩形，分别设置四个角的半径
    // 左上: 10, 右上: 20, 右下: 30, 左下: 40
    rect(50, 50, 300, 200, 10, 20, 30, 40);
}

代码解读：

这种参数组合允许我们创建非对称的圆角。注意观察左下角的圆角 (40) 比左上角的圆角 (10) 大得多。这种细节上的控制力是 p5.js 在设计类应用中表现出色的原因之一。

进阶应用：交互与最佳实践

仅仅画出一个静态的矩形是不够的。在实际开发中，我们经常需要处理交互。让我们看一个稍微复杂一点的例子：一个跟随鼠标移动的动态圆角矩形，并且根据速度改变颜色。

示例 4：动态交互矩形

在这个例子中，我们将结合鼠标位置和 rectMode(CENTER) 来实现更流畅的交互体验。

function setup() {
  // 创建全屏画布
  createCanvas(windowWidth, windowHeight);
  // 设置矩形绘制模式为中心点模式
  // 这样 矩形就会以鼠标为中心，而不是以鼠标为左上角
  rectMode(CENTER);
  noStroke(); // 去掉描边，让画面更干净
}

function draw() {
  background(50); // 深色背景，更有科技感

  // 根据鼠标在 X 轴的位置计算圆角大小
  // 鼠标越往右，圆角越大
  let cornerRadius = map(mouseX, 0, width, 0, 100);
  
  // 根据鼠标在 Y 轴的位置计算颜色 (从蓝色到红色)
  let r = map(mouseY, 0, height, 100, 255);
  let g = 100;
  let b = map(mouseY, 0, height, 255, 100);
  
  fill(r, g, b);
  
  // 在当前鼠标位置绘制矩形
  // 宽度和高度固定为 200x150
  rect(mouseX, mouseY, 200, 150, cornerRadius);
}

// 当窗口大小改变时，重新调整画布大小以适应屏幕
function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

深入解析：

在这个示例中，我们引入了 map() 函数，这是 p5.js 中最实用的工具之一。我们将鼠标的 X 坐标映射到圆角半径的数值上。当你移动鼠标时，你会发现矩形的形状在实时变化。

同时，我们将 INLINECODE29924cd2 设置为了 INLINECODE1a83a4b5。这是一个重要的用户体验细节：如果保持默认的 INLINECODE599e780b 模式，鼠标指针会位于矩形的左上角，这种“错位感”会让交互显得笨拙。而 INLINECODEcf6a8f37 模式让物体仿佛“抓”在鼠标指针下，感觉更加自然。

常见陷阱与性能建议

在大量使用 rect() 的项目中，我们可能会遇到一些问题。这里有一些来自实战的经验分享：

1. 避免在 draw() 中重复创建对象

在之前的例子中，为了演示方便，我们在 INLINECODE76d41fce 中调用了 INLINECODE28482123。但在高性能需求下（例如需要绘制上千个粒子时），频繁创建对象会触发浏览器的垃圾回收机制，导致卡顿。

优化建议： 将颜色或样式变量的定义移到 INLINECODEc98ad4a9 中，或者直接使用 RGB 数值 INLINECODE46933070。

2. 描边与填充的性能开销

默认情况下，p5.js 会同时绘制填充和描边。如果你只需要填充色，记得加上 INLINECODEfdfcf6be。如果你只需要描边，记得加上 INLINECODEbe4acda0。这两行代码不仅能提升视觉效果，还能减轻渲染管线的负担。

3. 理解 WebGL 模式的不同

如果你在使用 INLINECODEee939644，INLINECODEf139755d 的表现会有所不同。在 WebGL 模式下，原点 (0,0) 位于画布的中心，而不是左上角。此外，如果你想对矩形应用纹理或光照，必须使用 rect(x, y, w, h, detailX, detailY) 语法来提供足够的顶点细分。例如：

// 在 WebGL 模式下绘制一个高度细分的矩形
// 这样光照效果才能平滑显示
rect(0, 0, 200, 200, 20, 20);

总结与后续步骤

通过这篇文章，我们从零开始，系统地学习了 p5.js 的 INLINECODEc0f1501d 函数。我们不仅掌握了它的基础语法（位置、宽高），还学会了如何通过圆角参数来定制形状，以及如何利用 INLINECODE8d4f8219 来调整绘图逻辑以适应不同的交互场景。

我们甚至还探讨了性能优化和 WebGL 模式下的特殊用法。

想要继续提升吗？ 这里有一些挑战性的练习，你可以尝试动手实现：

碰撞检测游戏： 尝试编写一个简单的“接球”游戏，使用 rect() 绘制挡板，使用另一个函数绘制球体，并编写代码检测球是否落在了矩形区域内。
生成式艺术： 使用嵌套的 INLINECODEd8ad1a8f 循环，在一个网格中绘制 100 个矩形，每个矩形的大小和圆角都由随机数或 Perlin Noise (INLINECODEb979d621) 决定。
UI 界面设计： 尝试完全用代码绘制一个手机 App 的登录界面，包括圆角输入框和圆角按钮，不使用任何图片素材。

p5.js 的魅力在于它的简洁与强大并重。rect() 函数虽然只是基础，但正如我们所见，只要运用得当，它能创造出无限可能。希望你在接下来的代码之旅中，能灵活运用这些知识，构建出属于你的创意世界！

投稿给我们	如何建站？
vps是什么？	如何安装宝塔？
如何通过博客赚钱？	便宜wordpress托管方案
免费wordpress主题	这些都是免费方案

豆丁博客

深入探索 p5.js：绘制矩形的终极指南

矩形与 rect() 函数的基础

语法剖析

坐标系统的关键：rectMode()

实战示例：从简单到复杂

示例 1：绘制基础矩形

示例 2：全局圆角矩形

示例 3：自定义每个角的圆角

进阶应用：交互与最佳实践

示例 4：动态交互矩形

常见陷阱与性能建议

总结与后续步骤

相关文章美国1G带宽/1T流量高速vps $17.99/年