p5.js | createColorPicker()函数

createColorPicker()函数是p5.js中用于创建颜色选择器的方法。

语法

createColorPicker(color, x, y)

参数

• color：可选。选择器的默认颜色。
• x：可选。选择器的x坐标。
• y：可选。选择器的y坐标。

示例

基本用法

function setup() {
  let colorPicker = createColorPicker('#ed225d');
  colorPicker.position(10, 10);
}

在画布中创建一个颜色选择器，其默认颜色为 #ed225d，在 10, 10 的位置。

获取颜色值

let bgColorPicker, strokeColorPicker;

function setup() {
  bgColorPicker = createColorPicker('#ffffff');
  bgColorPicker.position(10, 10);

  strokeColorPicker = createColorPicker('#000000');
  strokeColorPicker.position(10, 40);
}

function draw() {
  let bgColor = bgColorPicker.color();
  background(bgColor);

  let strokeColor = strokeColorPicker.color();
  stroke(strokeColor);
  line(50, 50, 150, 50);
}

创建两个颜色选择器，用于控制背景色和线条颜色。在 draw() 函数中获取选择器的颜色值，并将其应用于画布。

参考资料

• p5.js | createColorPicker()