p5.js | createSelect()函数

p5.js 中的createSelect()函数用于在 DOM（文档对象模型）中创建一个下拉菜单元素以获取输入。 .value() 方法用于获取选定的选项。此函数包括 p5.dom 库。在 head 部分添加以下语法。

注意：此函数需要 p5.dom 库。因此，在 index.html 文件的 head 部分添加以下行。

句法：

createSelect(multiple)

或者

createSelect(existing)

参数：

• 多个：它保存输入的状态。如果为True则为多个，如果为False则为单个。
• 现有：它保存对象 DOM 选择元素。

返回值：此函数以 p5.Element 格式返回属性的值。

示例：此示例使用下拉菜单从给定选项更改背景颜色。

Javascript

// Create a variable for dropdown menu object
var dropdown;
 
function setup() {
    // Create a canvas
    createCanvas(400,400);
    // Create a dropdown menu object
    dropdown = createSelect();
    // Position the dropdown menu
    dropdown.position(150,200);
    // Set options
    dropdown.option("orange");
    dropdown.option("green");
    dropdown.option("skyblue");
}
 
function draw() {
    // Set the background-color as chosen
    // from the dropdown menu
    background(dropdown.value());
}

输出：

• 改变颜色之前：

• 在更改颜色期间：

• 改变颜色后：

在线编辑器： https://editor.p5js.org/
环境设置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/

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