点赞 + 关注 + 收藏 = 学会了
在 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() 函数的几种常见用法：
- 基本正方形：只使用了必选参数 x、y 和边长
- 带边框的正方形：使用
noFill()去掉填充，stroke()设置边框颜色，strokeWeight()设置边框粗细 - 圆角正方形：通过第四个参数设置了四个角的圆角半径
- 不同角不同圆角：分别设置了四个角的不同圆角半径
- 旋转的正方形：配合
push()、pop()、translate()和rotate()函数实现旋转效果 - 半透明正方形：在
fill()函数中添加了第四个参数设置透明度（0-255）
以上就是本文的全部内容啦，想了解更多 P5.js 用法欢迎关注 《P5.js中文教程》。
也可以➕我 green bubble 吹吹水咯
点赞 + 关注 + 收藏 = 学会了
