p5.js |选择（）函数

select()函数用于在页面中搜索具有给定 id、类或标签名称的元素，并将其作为 p5.element 返回。它的语法类似于 CSS 选择器。有一个可选参数可用于在给定元素内进行搜索。如果页面上存在与选择器匹配的多个元素，则此方法仅返回第一个元素。

注意：可以使用.elt属性访问元素的 DOM 节点。

句法：

select(name, [container])

参数：此函数接受上面提到的两个参数，如下所述：

• name：它是一个字符串，表示必须搜索的元素的 id、类或标签名称。
• 容器：它是一个可选参数，表示要搜索的元素。

返回值：当成功找到给定元素时，它返回一个包含该节点的 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://editor.p5js.org/

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

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