p5.js |填充()函数

fill()函数用于为形状填充颜色。该函数支持所有类型的颜色对象。例如 RGB、RGBA、Hex CSS 颜色和所有命名的颜色字符串。颜色对象也可以根据 RGB、RGBA、Hex CSS 颜色或命名颜色字符串。

句法：

fill( v1, v2, v3, alpha )

或者

fill( value )

或者

fill( gray, alpha )

或者

fill( values )

或者

fill( color )

参数：

• v1：用于设置相对于当前颜色范围的红色或色调值。
• v2：用于设置相对于当前颜色范围的绿色或饱和度值。
• v3：用于设置相对于当前颜色范围的蓝色或亮度值。
• alpha：用于设置绘图的透明度。
• value：用于设置颜色字符串的值。
• gray：用于设置灰度值。
• values：它是一个包含红色、绿色、蓝色和 alpha 值的数组。
• color：用于设置描边颜色。

以下示例说明了 p5.js 中的 fill()函数：

示例 1：

function setup() { 
      
    // Create Canvas of given size 
    createCanvas(400, 300); 
} 
  
function draw() { 
      
    // Set the background color 
    background(220); 
      
    // Use fill() function to fill color
    fill('green')
    // Draw a line 
    rect(50, 50, 150, 150); 
      
    // Use noFill() function
    noFill();
    
    // Draw a line 
    rect(100, 100, 150, 150); 
} 

输出：

示例 2：

function setup() { 
      
    // Create Canvas of given size 
    createCanvas(400, 300); 
} 
  
function draw() { 
      
    // Set the background color 
    background(220); 
      
    // Use noFill() function
    noFill();
      
    // Draw a circle 
    circle(140, 100, 150);
      
    // Use fill() function to fill color
    fill('green');
      
    // Draw a crrcle 
    circle(240, 100, 150); 
} 

输出：

参考： https://p5js.org/reference/#/p5/fill