p5.js | createCheckbox()函数

介绍

createCheckbox() 函数是 p5.js 中的一个可用于创建复选框的函数，它可以方便地在您的 p5.js 项目中添加交互性。复选框是指在表单中出现的带有复选标记的小方框，可选中或取消选中。复选框通常用于表示预设值和多选选项。

语法

createCheckbox(label, [defaultValue])

参数

• label：String，要显示在复选框旁边的标签（可选）。
• defaultValue：Boolean，指定复选框的默认值。 默认为false（可选）。

返回值

p5.Element，p5.js 元素对象，表示复选框。

示例

以下示例演示了如何使用 createCheckbox() 函数来创建并控制复选框：

let checkbox;

function setup() {
  createCanvas(400, 400);
  // 创建一个标签为 "Toggle" 的复选框
  checkbox = createCheckbox('Toggle');
  // 将它移动到画布的中央
  checkbox.position(width/2 - checkbox.width/2, height/2 - checkbox.height/2);
}

function draw() {
  background(220);
  // 如果复选框被选中了，改变画布的背景颜色
  if (checkbox.checked()) {
    background(0);
  }
}

这个例子创建了一个标签为“Toggle”的复选框，并在画布的中央放置。通过检查复选框的状态来设置背景颜色，实现了一个简单的交互效果。

可选参数

您可以通过以下参数来定义其他样式和属性：

• id：设置元素的 ID。
• class：设置元素的 CSS 类。
• checked：设置复选框的选中状态。
• value：设置复选框的值。
• labelClass：设置标签的 CSS 类。
• labelStyle：设置标签的样式。

总结

• createCheckbox() 函数可用于在 p5.js 项目中创建复选框。
• createCheckbox() 函数需要一个 label 参数以指定标签。
• 可以使用 checked() 方法来检查复选框是否被选中。
• 您可以为复选框设置可选参数来定义样式和属性。