P5.js 颜色完整参考

P5.js是一款基于Processing的JavaScript库，具有简单易学和兼容性强的特点，而颜色非常重要，本文将会介绍P5.js的完整颜色参考。

创建颜色

在P5.js中有三种方法可以创建颜色：

1.RGB颜色

RGB颜色是通过红、绿、蓝三原色的不同组合混合出的颜色。P5.js中，可以用5种方法来创建RGB颜色，其中最常用的是如下所示的方法：

// 创建红色
let r = 255;
let g = 0;
let b = 0;
let c = color(r, g, b);

2. RGBA颜色

RGBA颜色是与RGB颜色相似的颜色，不同的是RGBA颜色可以设置透明度。透明度值的范围从0（完全透明）到255（完全不透明）。创建RGBA颜色的方法和RGB颜色一样，唯一的区别是添加了一个α（alpha）参数，表示透明度。

let r = 255;
let g = 0;
let b = 0;
let a = 100;
let c = color(r, g, b, a);

3. HSB颜色

HSB颜色是通过颜色的色调（hue）、饱和度（saturation）和亮度（brightness）三种属性来定义颜色的。

// 创建青色
let hue = 150;
let saturation = 100;
let brightness = 100;
let c = color(hue, saturation, brightness);

预定义颜色

P5.js中，还为我们提供了一些常见颜色的预定义值，如下所示：

// 预定义颜色 - 红色
color('red');

// 预定义颜色 - 白色
color('white');

// 预定义颜色 - 黑色
color('black');

// 预定义颜色 - 透明
color('rgba(0,0,0,0)');

颜色操作

P5.js中有多种方法可用于颜色操作。例如，您可以使用lerpColor()方法在两种颜色之间创建混合的“中间颜色”。

// 混合两种颜色
let c1 = color(255, 0, 0);
let c2 = color(0, 255, 0);
let c3 = lerpColor(c1, c2, 0.5);

颜色属性

每个颜色都有4个属性：红，绿，蓝和透明（如果适用）。

// 获取红色属性
let c = color(255, 0, 0, 100);
let r = red(c); // 255

// 获取绿色属性
let c = color(0, 255, 0, 100);
let g = green(c); // 255

// 获取蓝色属性
let c = color(0, 0, 255, 100);
let b = blue(c); // 255

// 获取透明度属性
let c = color(255, 0, 0, 100);
let a = alpha(c); // 100

小结

本文介绍了P5.js中颜色的完整参考。我们讨论了三种颜色类型，以及如何使用预定义的颜色，执行颜色混合，以及如何获取颜色属性的值。

参考

• P5.js Color Reference