p5.js 正方形square的基础用法

德育处主任

发布于 2026-09-06 11:30:22

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

在 p5.js 中，square() 是一个用于绘制正方形的便捷函数。与使用 rect() 绘制正方形相比，square() 更加简洁，因为它只需要指定边长而不需要分别指定宽和高。

语法说明

基本语法：

square(x, y, s, [tl], [tr], [br], [bl])

x：正方形左上角的 x 坐标（必选）
y：正方形左上角的 y 坐标（必选）
s：正方形的边长（必选）
tl：左上角的圆角半径（可选）
tr：右上角的圆角半径（可选）
br：右下角的圆角半径（可选）
bl：左下角的圆角半径（可选）

基础示例

下面是一个简单的示例，展示了如何使用 square() 函数绘制不同样式的正方形：

function setup() {
  createCanvas(600, 400);
  background(240);
  textSize(16);
  fill(0);
  
  // 1. 基本正方形
  fill(255, 150, 150); // 浅红色填充
  square(50, 60, 100); // x=50, y=50, 边长=100
  fill(0);
  text("基本正方形", 50, 40);
  
  // 2. 带边框的正方形
  noFill(); // 无填充
  stroke(0, 150, 255); // 蓝色边框
  strokeWeight(3); // 边框粗细
  square(200, 60, 100);
  fill(0);
  text("带边框的正方形", 200, 40);
  
  // 3. 圆角正方形（四个角都有圆角）
  fill(150, 255, 150); // 浅绿色填充
  square(350, 60, 100, 20); // 四个角都有20px的圆角
  fill(0);
  text("圆角正方形", 350, 40);
  
  // 4. 不同角不同圆角的正方形
  fill(200, 150, 255); // 淡紫色填充
  square(50, 220, 100, 30, 0, 15, 0); // 左上角30，右下角15
  fill(0);
  text("不同角不同圆角", 50, 200);
  
  // 5. 旋转的正方形（需要配合rotate()函数）
  push(); // 保存当前状态
  translate(250, 250); // 移动坐标原点
  rotate(PI/8); // 旋转45度
  fill(255, 255, 150); // 浅黄色填充
  square(-30, -20, 100); // 以新原点为中心绘制
  pop(); // 恢复之前的状态
  fill(0);
  text("旋转的正方形", 200, 200);
  
  // 6. 半透明正方形
  fill(150, 200, 255, 100); // 浅蓝色填充，透明度100（0-255）
  square(350, 220, 100);
  fill(0);
  text("半透明正方形", 350, 200);
}

上面的示例展示了 square() 函数的几种常见用法：