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

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

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

语法说明

基本语法:

js 复制代码
square(x, y, s, [tl], [tr], [br], [bl])
  • x:正方形左上角的 x 坐标(必选)
  • y:正方形左上角的 y 坐标(必选)
  • s:正方形的边长(必选)
  • tl:左上角的圆角半径(可选)
  • tr:右上角的圆角半径(可选)
  • br:右下角的圆角半径(可选)
  • bl:左下角的圆角半径(可选)

基础示例

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

js 复制代码
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() 函数的几种常见用法:

  1. 基本正方形:只使用了必选参数 x、y 和边长
  2. 带边框的正方形 :使用 noFill() 去掉填充,stroke() 设置边框颜色,strokeWeight() 设置边框粗细
  3. 圆角正方形:通过第四个参数设置了四个角的圆角半径
  4. 不同角不同圆角:分别设置了四个角的不同圆角半径
  5. 旋转的正方形 :配合 push()pop()translate()rotate() 函数实现旋转效果
  6. 半透明正方形 :在 fill() 函数中添加了第四个参数设置透明度(0-255)

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

也可以➕我 green bubble 吹吹水咯

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

相关推荐
知识分享小能手42 分钟前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
魔云连洲44 分钟前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell1 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
超级无敌攻城狮3 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel3 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
gnip4 小时前
JavaScript事件流
前端·javascript
赵得C4 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
wow_DG4 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js
weixin_456904274 小时前
UserManagement.vue和Profile.vue详细解释
前端·javascript·vue.js
资深前端之路4 小时前
react 面试题 react 有什么特点?
前端·react.js·面试·前端框架