P5JS 点击按钮 - Javascript

在 P5JS 中，可以通过按钮来触发特定的事件。按钮可以用来更改绘画的形式，也可以用来改变页面上其他元素的状态。 在本文中，我们将介绍如何使用 P5JS 创建一个可以通过点击按钮来更改页面背景颜色的程序。

准备工作

在开始编写代码之前，您需要了解如何使用 P5JS。如果您还没有 P5JS 的基础知识，可以先参考官方文档，以便更好地理解下面的代码示例。

创建按钮

在 P5JS 中，可以使用 createButton() 函数来创建按钮。该函数接收一个字符串参数，表示按钮的文本内容。下面是一个示例代码片段，用于创建一个名为 "change color" 的按钮：

let button;

function setup() {
  createCanvas(windowWidth, windowHeight);
  button = createButton('change color');
  button.position(20, 20);
  button.mousePressed(changeColor);
}

备注：

• createCanvas() 函数用于创建画布。
• button.position() 函数用于设置按钮的位置。
• button.mousePressed() 函数用于指定按钮被点击时所执行的函数。在本例中，按钮被点击后调用的函数是 changeColor()。

创建触发函数

创建 changeColor() 函数，该函数将更改页面的背景颜色。以下是示例代码：

function changeColor() {
  let r = random(255);
  let g = random(255);
  let b = random(255);
  background(r, g, b);
}

该函数使用 background() 函数来更改页面的背景颜色。在这个函数中，我们使用 random() 函数来生成随机的 R、G、B 值，从而得到不同的背景颜色。

最终代码

下面是完整的代码示例：

let button;

function setup() {
  createCanvas(windowWidth, windowHeight);
  button = createButton('change color');
  button.position(20, 20);
  button.mousePressed(changeColor);
}

function changeColor() {
  let r = random(255);
  let g = random(255);
  let b = random(255);
  background(r, g, b);
}

在运行这个程序后，您将看到一个名为 "change color" 的按钮。当您点击该按钮时，程序将使用随机颜色更改页面的背景颜色。

总结

通过本文，您已经学会如何使用 P5JS 创建按钮，并更改页面的背景颜色。在实际应用中，您可以根据具体需求，使用按钮执行更多的操作。