p5.js | endShape()函数

p5.js 中的endShape()函数在 beginShape ()函数之后用于完成形状的绘制。调用此函数时，将在前面的beginShape()函数之后定义的所有图像数据写入图像缓冲区以用作形状。

有一个可选的模式参数可以定义为使用“CLOSE”模式。此模式有助于在结束之前关闭形状。

句法：

endShape( [mode] )

参数：此函数接受一个如上所述和如下所述的参数：

• mode：是一个常数，可以用来改变函数的模式。它可以有一个值 CLOSE。这用于关闭形状，即将形状的开头连接到结尾。它是一个可选参数。

以下示例说明了 p5.js 中的endShape()函数：

示例 1：

let currMode;
  
function setup() {
  createCanvas(600, 300);
  textSize(18);
  
  let shapeModes = [
    LINES,
    TRIANGLES,
    TRIANGLE_FAN,
    TRIANGLE_STRIP,
    QUADS
  ];
  let index = 0;
  currMode = shapeModes[index];
  
  let closeBtn = createButton("Change beginShape() mode");
  closeBtn.position(20, 40);
  closeBtn.mouseClicked(() => {
    if (index < shapeModes.length) index++;
    else index = 0;
    currMode = shapeModes[index];
  });
}
  
function draw() {
  clear();
  
  // Starting the shape using beginShape()
  beginShape(currMode);
  vertex(80, 100);
  vertex(100, 80);
  vertex(180, 150);
  vertex(180, 250);
  vertex(150, 150);
  
  // Ending the shape using endShape()
  endShape();
  
  // Points
  circle(80, 100, 10);
  circle(100, 80, 10);
  circle(180, 150, 10);
  circle(180, 250, 10);
  circle(150, 150, 10);
}

输出：

示例 2：

let isUsingClose = false;
  
function setup() {
  createCanvas(400, 300);
  textSize(18);
  
  let closeBtn = createButton("Toggle CLOSE parameter");
  closeBtn.position(20, 40);
  closeBtn.mouseClicked(() => (isUsingClose = !isUsingClose));
}
  
function draw() {
  clear();
  
  text("Press the button to toggle the CLOSE mode", 10, 20);
  
  beginShape();
  vertex(20, 100);
  vertex(40, 150);
  vertex(180, 200);
  vertex(180, 100);
  vertex(150, 150);
  
  // Use the CLOSE mode if it is enabled
  if (isUsingClose) endShape(CLOSE);
  else endShape();
  
  // Show the vertices
  circle(20, 100, 10);
  circle(40, 150, 10);
  circle(180, 200, 10);
  circle(180, 100, 10);
  circle(150, 150, 10);
}

输出：

在线编辑器： https://editor.p5js.org/

环境设置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/

参考： https://p5js.org/reference/#/p5/endShape