p5.js endShape()用法及代碼示例

在beginShape()函數之後使用p5.js中的endShape()函數來完成形狀的繪製。調用此函數時，將在前一個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); 
}

輸出：

endShape-shape-modes

範例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); 
}

輸出：

endShape-close-toggle

在線編輯： https://editor.p5js.org/

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

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

相關用法

注：本文由純淨天空篩選整理自sayantanm19大神的英文原創作品 p5.js | endShape() Function。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。