除了设置图形的描边颜色,p5.js还可以设置图形的描边像素尺寸、描边边角属性。
例2-21 描边的宽度
p5.js绘制的图形默认描边宽度为1像素,可以使用strokeWeight(weight)函数对描边宽度进行更改。此函数只有一个参数,表示图形描边的宽度(效果图如图2.21所示)。
图2.21 例2-21效果图
例2-22 设置描边边角属性
strokeCap(cap)函数设置线段端点的形状,strokeJoin(join)函数设置描边边角的形状(效果图如图2.22所示)。
图2.22 例2-22效果图
strokeCap函数有3个可选参数,分别是SQUARE(方形)、PROJECT(突出)和ROUND(圆形),默认参数是ROUND。strokeJoin函数同样有3个可选参数,分别是MITER(锯齿形)、BEVEL(斜切角)和ROUND(圆角),默认参数是MITER。设置描边属性函数后,所有绘制的形状的描边都会受到影响,直到在程序中重新进行设置。
综上所述,图2.23总结了本章重要的颜色填充和描边属性相关函数的使用方法与呈现效果。
图2.23 颜色填充和描边属性函数的总结