p5.js | createButton()函数

在p5.js中，createButton()函数用于创建一个按钮。

语法

createButton(label, [value])

• label：按钮上的文本标签，必填项。
• value（可选）：按钮所代表的值。

返回值

该函数将返回一个 p5.Element 对象，该对象可以用于在DOM中插入和操作该按钮。

示例

以下示例将创建一个按钮，当按钮被单击时，将切换文本颜色：

let button;

function setup() {
  createCanvas(400, 400);
  button = createButton("切换颜色");
  button.mousePressed(changeColor);
}

function changeColor() {
  if (button.style("color") == "rgb(0, 0, 0)") {
    button.style("color", "rgb(255, 0, 0)");
  } else {
    button.style("color", "rgb(0, 0, 0)");
  }
}

DOM元素方法

在创建按钮后，您可以使用DOM元素方法向其添加事件监听器或更改其样式。以下是一些常见的DOM元素方法：

.mousePressed(callback)

在按钮上添加按下鼠标按钮时执行的回调函数。callback 是一个函数，该函数将在按钮上单击时执行。

button.mousePressed(myFunction);

function myFunction() {
  console.log("The button was clicked!");
}

.style(property, [value])

更改按钮的CSS样式。property是要更改的CSS属性的名称，value是CSS属性的新值。

button.style("background-color", "green");

.attribute(name, [value])

更改按钮的HTML属性。name是要更改的属性的名称，value是属性的新值。

button.attribute("disabled", true);

总结

createButton()函数用于在p5.js中创建一个按钮，并返回一个 p5.Element对象，可用于在DOM中插入和操作该按钮。使用DOM元素方法可以向该按钮添加事件监听器或更改其样式和HTML属性。