p5.js | rect()函数

简介

p5.js是一个用于创造交互式图形的JavaScript库。它基于Processing语言，旨在提供简单易用的方式来创建图像、动画和交互式应用程序。

rect()函数是p5.js库中的一个重要函数，用于绘制矩形。熟练掌握rect()函数可以帮助程序员轻松创建各种矩形形状的图像。

使用方法

要使用rect()函数，需要在p5.js的画布上调用该函数，并传递一些参数来定义矩形的位置、大小和样式。下面是rect()函数的基本语法：

rect(x, y, width, height, [radius])

• x: 矩形左上角的x坐标
• y: 矩形左上角的y坐标
• width: 矩形的宽度
• height: 矩形的高度
• radius (可选): 矩形的圆角半径

示例

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  
  // 绘制一个简单的矩形
  rect(50, 50, 100, 100);
  
  // 绘制一个具有圆角的矩形
  rect(200, 50, 100, 100, 20);
  
  // 绘制一个长方形
  rect(50, 200, 200, 50);
}

你可以将上述代码放入p5.js的setup()和draw()函数中，并在网页上运行以查看效果。

进一步定制矩形

rect()函数还可以使用p5.js提供的其他功能进行更进一步的定制。

填充颜色

使用fill()函数可以设置矩形的填充颜色。fill()函数接受各种颜色值作为参数，例如预定义的颜色名称、RGB值或rgba值。

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  
  // 设置红色填充
  fill('red');
  rect(50, 50, 100, 100);
  
  // 设置半透明的蓝色填充
  fill('rgba(0, 0, 255, 0.5)');
  rect(200, 50, 100, 100);
}

边框颜色和宽度

使用stroke()函数可以设置矩形的边框颜色，使用strokeWeight()函数可以设置边框的宽度。

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  
  // 设置红色填充和绿色边框
  fill('red');
  stroke('green');
  rect(50, 50, 100, 100);
  
  // 设置蓝色边框宽度为5像素
  noFill();
  stroke('blue');
  strokeWeight(5);
  rect(200, 50, 100, 100);
}

不绘制边框

使用noStroke()函数可以设置矩形不绘制边框。

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  
  // 设置红色填充和无边框
  fill('red');
  noStroke();
  rect(50, 50, 100, 100);
}

小结

rect()函数是p5.js库中用于绘制矩形的重要函数。通过掌握rect()函数的使用方法以及与其他p5.js函数的配合，程序员可以轻松创建各种矩形形状的图像，并定制其样式。通过使用填充颜色、边框颜色和宽度等特性，可以进一步定制矩形的外观。p5.js库提供了丰富而易用的功能，为程序员提供了创造交互式图形的便捷工具。