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

p5.js中的createCheckbox()函数用于在DOM(文档对象模型)中创建复选框元素。此函数包括p5.dom库。在头部添加以下语法。

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

用法:

createCheckbox(label, value)

参数：

label:此参数保留复选框旁边显示的标签。
value:此参数保存复选框的状态(是/否)。

例：本示例使用复选框将背景颜色从浅更改为暗，反之亦然。

// Create a variable for checkbox object 
var checkbox; 
  
// Create a function to change the background-color 
function change_bg() { 
    // Set dark color if box is checked 
    if (this.checked()) { 
        background("darkgreen"); 
    } 
    // Set light color if box is unckecked 
    else { 
        background("lightgreen"); 
    } 
} 
  
function setup() { 
    // Create a canvas 
    createCanvas(400, 400); 
    // Set the background-color 
    background("lightgreen"); 
    // Create a checkbox object  
    // Initially unchecked 
    checkbox = createCheckbox('Dark Background', false); 
    // Posotion the checkbox object 
    checkbox.position(160, 200); 
    // Call the change_bg() function when the box 
    // is cheched or unchecked 
    checkbox.changed(change_bg); 
}

输出：
选中复选框之前：

咀嚼盒子之后：

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

相关用法

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