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

select()函數用於在頁麵中搜索具有給定id，類或標記名的元素，並將其作為p5.element返回。它的語法類似於CSS選擇器。可選參數可用，可用於在給定元素內搜索。如果頁麵上存在與選擇器匹配的多個元素，則此方法僅返回第一個元素。

注意：可以使用.elt屬性訪問元素的DOM節點。

用法:

select(name, [container])

參數：該函數接受上述和以下所述的兩個參數：

name:它是一個字符串，表示必須搜索的元素的ID，類或標記名。
container:它是一個可選參數，表示要搜索的元素。

返回值：成功找到給定元素後，它將返回包含該節點的p5.element。否則，它返回null。

以下示例說明了p5.js中的select()函數：

範例1：

function setup() { 
  createCanvas(650, 50); 
  textSize(20); 
  text("Click the mouse to select the paragraph" + 
       " element and change its position.", 0, 20); 
   
  para1 = createP("This is paragraph 1"); 
  para2 = createP("This is paragraph 2"); 
  para3 = createP("This is paragraph 3"); 
} 
   
function mouseClicked() { 
  
  // Select the first 
  // paragraph element 
  selectedP = select("p"); 
   
  // Change position to 200, 20 
  selectedP.position(200, 20); 
}

輸出：

範例2：

function setup() { 
  createCanvas(650, 300); 
  textSize(20); 
  text("Click the mouse once to select the"+ 
       " canvas and change its color.", 0, 20); 
   
} 
   
function mouseClicked() { 
  
  // Select the first 
  // canvas element 
  selectedCanvas = select("canvas"); 
   
  // Get the DOM node using .elt and 
  // change background color to green 
  selectedCanvas.elt.style.backgroundColor 
        = "green"; 
}

輸出：

在線編輯：

環境設置：

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

相關用法

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