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

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

相关推荐
ZoeLandia15 小时前
Vue 项目 JSON 在线编辑、校验如何选?
前端·vue.js·json
派大星_分星15 小时前
nuxt fetch $fetch useFetch 等使用方式区别
前端
快手技术16 小时前
兼顾效率和性能!快手低代码平台在大型活动中的技术实践!
前端
WebInfra16 小时前
📱开源 AI 工具驱动 iOS 自动化 、接入全新 Qwen 模型 - Midscene v0.29 发布
前端·ios·测试
乖女子@@@16 小时前
React-props的children属性
前端·javascript·react.js
OEC小胖胖16 小时前
组件化思维(下):表单与交互组件,倾听用户的心声
前端·微信小程序·小程序·微信开放平台
八月十八16 小时前
React常用Hooks及使用示例大全
前端·javascript·react.js
狼爷17 小时前
前端项目从 Windows 到 Linux:构建失败的陷阱
前端·node.js·angular.js
1024小神17 小时前
vitepress多语言实现第一次跟随浏览器,第二次不跟随
前端
叫我詹躲躲17 小时前
🚀 震撼!10道DFS&BFS神级题目让你的算法能力飙升300%
前端·leetcode