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

p5.js中p5.Element的id()方法用於設置或返回元素的ID。當未將ID指定為參數時，它將返回元素的當前ID。頁麵上隻有一個元素可以為其指定特定的ID。

用法:

id( id )

參數：該函數接受如上所述和以下描述的單個參數。

id:它是一個字符串，表示元素的ID。

範例1：以下示例說明了p5.js中的id()方法。

Javascript

function setup() { 
  createCanvas(550, 300); 
  textSize(18); 
  
  text("Click on the button to create a new " + 
       "element with the given ID", 20, 20); 
  
  setBtn =  
    createButton("Create new Element with ID"); 
  setBtn.position(30, 40); 
  setBtn.mouseClicked(createNewElement); 
  
  setBtn =  
    createButton("Show Last Element ID"); 
  setBtn.position(300, 40); 
  setBtn.mouseClicked(showID); 
  
  id_name = createInput('tmpID'); 
  id_name.position(30, 80); 
} 
  
function createNewElement() { 
  clear(); 
  
  // Create a new p5.Element 
  tmpElement = createElement("p"); 
  
  // Get the ID to set 
  let idToSet = id_name.value(); 
  
  // Set the ID of the element 
  tmpElement.id(idToSet); 
  
  text("New element created with ID:" + 
       idToSet, 30, 120); 
  
  text("Click on the button to create a new " + 
       "element with the given ID", 20, 20); 
} 
  
function showID() { 
  clear(); 
  
  // Get the ID of the element 
  let setID = tmpElement.id(); 
  
  // Display the ID 
  text("The ID of the last element is:" +  
       setID, 30, 120); 
  
  text("Click on the button to create a new " + 
       "element with the given ID", 20, 20); 
}

輸出：

範例2：

Javascript

function setup() { 
  
  // Create a new canvas 
  canv = createCanvas(550, 300); 
  
  // Set the ID of the canvas 
  canv.id("newCanvas"); 
  
  textSize(18); 
  text("Click on the button to show the ID " + 
       "of the canvas element", 20, 20); 
  
  setBtn =  
    createButton("Show ID of the canvas"); 
  setBtn.position(30, 40); 
  setBtn.mouseClicked(showID); 
} 
  
function showID() { 
  clear(); 
  
  // Get the ID of the element 
  let setID = canv.id(); 
  
  // Display the ID 
  text("The ID of the canvas is:" + 
       setID, 20, 80); 
  
  text("Click on the button to show the ID " + 
       "of the canvas element", 20, 20); 
}

輸出：

在線編輯： https://editor.p5js.org/
環境設置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
參考： https://p5js.org/reference/#/p5.Element/id

相關用法

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