📜  如何在 p5 中创建一个矩形 (1)

📅  最后修改于: 2023-12-03 15:24:18.353000             🧑  作者: Mango

如何在 p5 中创建一个矩形

在 p5 中,可以使用 rect() 函数创建矩形。以下是如何使用 rect() 函数创建矩形的步骤:

1. 创建一个画布

使用 createCanvas() 函数创建一个画布,并设置宽度和高度。

function setup() {
  createCanvas(400, 400);
}
2. 绘制矩形

使用 rect() 函数绘制矩形。rect() 函数需要四个参数:x 坐标、y 坐标、宽度和高度。

function draw() {
  background(220);
  rect(50, 50, 100, 100);
}

以上代码将在画布上绘制一个左上角坐标为 (50, 50)、宽度为 100、高度为 100 的矩形。

3. 修改矩形的填充颜色和边框颜色

可以使用 fill() 函数修改矩形的填充颜色,并使用 stroke() 函数修改矩形的边框颜色。以下是修改矩形填充颜色和边框颜色的示例代码:

function draw() {
  background(220);
  fill(255, 0, 0); // 红色填充颜色
  stroke(0, 255, 0); // 绿色边框颜色
  rect(50, 50, 100, 100);
}
4. 修改矩形的圆角

可以使用 rect() 函数的第五个参数来修改矩形的圆角。以下是修改矩形圆角的示例代码:

function draw() {
  background(220);
  fill(255, 0, 0);
  stroke(0, 255, 0);
  rect(50, 50, 100, 100, 20); // 半径为 20 的圆角
}

以上代码将使用半径为 20 的圆角绘制矩形。

完整代码
function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  fill(255, 0, 0);
  stroke(0, 255, 0);
  rect(50, 50, 100, 100, 20);
}

以上代码将在画布上绘制一个左上角坐标为 (50, 50)、宽度和高度均为 100、半径为 20 的圆角、填充颜色为红色、边框颜色为绿色的矩形。