2.5　颜色填充

p5.js使用fill函数（设置填充颜色）和stroke函数（设置描边颜色）改变形状的颜色，还可以使用background函数设置背景的填充颜色。

例2-16　填充灰度颜色

fill函数或者stroke函数写入一个参数表示用灰度颜色填充。灰度颜色的参数值范围为从0至255，其中255是白色，128是中灰色，0是黑色（如图2.15所示）。

在黑色背景上为3个矩形分别填充不同深度的灰色（效果图如图2.16所示）。

例2-17　不填充与不描边

noStroke函数设置图形不描边，noFill函数设置图形不填充（效果图如图2.17所示）。

例2-18　彩色RGB填充

填充灰度颜色仅需要一个参数值。如果想要填充彩色，就需要在fill（r，g，b）和stroke（r，g，b）函数中设置3个参数，即RGB参数值。它是人们常说的计算机三原色（红色RED，绿色GREEN，蓝色BLUE），也是屏幕呈现颜色的默认模式。fill函数和stroke函数的3个参数分别代表了红色、绿色和蓝色的数值，范围都是从0至255。这3个参数同样可以用在background函数中进行背景颜色的设置（效果图如图2.18所示）。

例2-19 透明度

fill函数或stroke函数添加第4个参数可以设置形状填充的透明度，参数值的范围是从0至255。当值为0时，图形颜色为完全透明（不显示）；当值为255时，则没有任何透明效果。透明度的改变让颜色之间有了相互混合的可能（效果图如图2.19所示）。

例2-20　HSB色彩显示模式

HSB是一种从视觉感受角度定义颜色的模式。H、S、B分别代表色相、饱和度、亮度。

色相H（hue）：在0°～360°的标准色环上，按照角度值标识颜色。例如，红色是0°、橙色是30°。

饱和度S（saturation）：饱和度是指颜色的纯度，表示色相中彩色成分所占的比例，用从0%（灰色）至100%（完全饱和）的百分比来度量。

亮度B（brightness）：亮度是颜色的明暗程度，通常用从0%（黑）至100%（白）的百分比来度量。

调用HSB色彩显示模式需要使用colorMode（HSB，360，100，100）函数进行设置（效果图如图2.20所示）。