p5.js | createCheckbox()函数

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

句法：

createCheckbox(label, value)

参数：

• label：此参数保存复选框旁边显示的标签。
• value：此参数保存复选框的状态（真/假）。

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

javascript

// 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 unchecked
    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);
    // Position the checkbox object
    checkbox.position(160, 200);
    // Call the change_bg() function when the box
    // is checked or unchecked
    checkbox.changed(change_bg);
}

输出：
在选中此框之前：

勾选后：

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