P5.js开发之——通过createSlider向页面中添加滑块并改变背景色

发表于 分类于 ， ， 阅读时长 ≈ 1 分钟

一 概述

  • createSlider语法介绍
  • 示例—通过createSlider添加滑块，并改变背景色

二 createSlider语法介绍

2.1 语法

1
createSlider(min, max, [value], [step])

2.2 说明

  • 在页面中添加滑块
  • 可以级联使用p5.Element的语法

2.3 参数及返回值

参数

参数 说明
min 数字：最小值
max 数字：最大值
value 默认值
step 滑块步长（如果 step为 0，滑块将从最小值连续移动到最大值）

返回值

p5.Element

三 示例

3.1 示例一

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let slider;

function setup() {

  createCanvas(400, 400);
  
  slider = createSlider(0, 255, 100);
  slider.position(10, 10);
  slider.style("width", "80px");

}

function draw() {
  let val = slider.value();
  background(val);

}

效果图

3.2 实例二

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
let slider;

function setup() {

  createCanvas(windowWidth, windowHeight);

  colorMode(HSB);
  slider = createSlider(0, 360, 60, 40);
  slider.position(10, 10);
  slider.style('width', '80px');

}

function draw() {
  let val = slider.value();
  background(val, 100, 100, 1);

}

效果图

四 参考

  • P5官方文档—createSlider