p5.js | endShape()函数

Introduction

在p5.js中，endShape()函数用于结束创建图形的操作，它是一种将线条闭合并填充颜色、图案等的方法。endShape()函数必须与beginShape()函数一起使用。

Syntax

endShape([mode])

• mode: 可选参数，表示填充样式，可以为以下几种之一：
  • CLOSED: 闭合，线条相交形成多边形后填充颜色或图案。
  • OPEN: 开放，线条不闭合。
  • CLOSE: 闭合。

Example

以下是一个基础的使用endShape()函数的例子：

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

function draw() {
  background(220);

  beginShape();
  vertex(50, 50);
  vertex(100, 75);
  vertex(175, 125);
  vertex(125, 200);
  vertex(50, 150);
  endShape();
}

这段代码会画出一个五边形，如下图所示：

我们还可以使用fill()函数来为图形填充颜色：

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

function draw() {
  background(220);

  fill(255, 0, 0); // 设置填充颜色为红色
  beginShape();
  vertex(50, 50);
  vertex(100, 75);
  vertex(175, 125);
  vertex(125, 200);
  vertex(50, 150);
  endShape();
}

这段代码会画出一个被填充为红色的五边形，如下图所示：

Conclusion

在p5.js中，endShape()函数是一种将线条闭合并填充颜色、图案等的方法，用于和beginShape()函数一起使用，它还可以用于设定不同的填充样式。