P5.js开发之——通过createButton向页面中添加按钮

发表于 2022-01-18 分类于开发， C-前端开发， P5.js 阅读时长 ≈ 1 分钟

一概述

createButton语法介绍
示例—添加按钮和点击事件

二 createButton语法介绍

2.1 语法

1	createButton(label, [value])

2.2 说明

在页面中添加按钮
可以级联使用p5.Element的语法

2.3 参数及返回值

参数

参数	说明
label	按钮文字描述
value	按钮的value值(可选)

返回值

p5.Element

三示例—添加按钮和点击事件

3.1 代码

let button;

function setup() {

  createCanvas(windowWidth, windowHeight);
  background(0);
  button = createButton("按钮");
  button.style("padding-left","20px");
  button.style("padding-right","20px");
  button.style("padding-top","10px");
  button.style("padding-bottom","10px");
  button.style("font-size","30px");
  button.center();
  button.mousePressed(changeBG);

}
function changeBG() {
  let val = random(255);
  background(val);
}

3.2 效果图

四参考

P5官方文档—createButton

0%