📜  p5js 点击按钮 - Javascript (1)

📅  最后修改于: 2023-12-03 15:03:27.584000             🧑  作者: Mango

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 创建按钮,并更改页面的背景颜色。在实际应用中,您可以根据具体需求,使用按钮执行更多的操作。