p5.js createSelect()用法及代码示例

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

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

<script src=”https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js”>
</script>

用法:

createSelect(multiple)

或者

createSelect(existing)

参数：

multiple:它保持输入状态。如果是Ture，则为多个；如果为False，则为单个。
existing:它包含对象DOM选择元素。

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

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

// 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 choosen  
    // from the dropdown menu 
    background(dropdown.value()); 
}

输出：

更改颜色之前：
更改颜色期间：
更改颜色后：

在线编辑：
环境设置：

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

相关用法

注：本文由纯净天空筛选整理自SujanDutta大神的英文原创作品 p5.js | createSelect() Function。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。