p5.js | createButton()函数

createButton()函数用于在 DOM（文档对象模型）中创建按钮元素。 .size()函数用于设置按钮元素的大小。 .mousePressed()函数用于指定鼠标按钮按下时的行为。
注意：此函数需要 p5.dom 库。因此，在index.html文件的 head 部分添加以下行。

句法：

createButton( label, value )

参数：该函数接受上面提到的两个参数，如下所述：

• label：此参数保存按钮上显示的标签。
• value：此参数保存按钮的值。

返回值：它返回一个指针元素，保存创建的节点对象。

注意：此按钮元素可以与各种 JavaScript 事件相关联，例如鼠标按下、鼠标单击、鼠标释放等。

示例：此示例使用 createButton()函数通过 p5.js 按钮元素更改背景颜色。

// Create a variable for button object
var color_button;
   
// Create a function to change the background-color
function change_background() {
      
    // Pick a random number for r value
    r = random(255);
      
    // Pick a random number for g value
    g = random(255);
      
    // Pick a random number for b value
    b = random(255);
      
    // Set a random background-color
    background(r, g, b);
}
   
function setup() {
      
    // Create a canvas
    createCanvas(400, 400);
      
    // Set an initial background-color
    background(50);
      
    // Create the button
    color_button = createButton("Change Color");
      
    // Position the button
    color_button.position(150, 200);
      
    // When the button is clicked change_background()
    // function is called
    color_button.mouseClicked(change_background);
}

输出：

• 
• 点击按钮后：
  
• 再次点击按钮后：
  

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