p5.js | función de relleno()

La función fill() se utiliza para rellenar el color de las formas. Esta función es compatible con todos los tipos de objetos de color. Por ejemplo, color RGB, RGBA, Hex CSS y todas las strings de color con nombre. El objeto de color también se puede configurar como string en términos de color RGB, RGBA, Hex CSS o string de color con nombre.

Sintaxis:

fill( v1, v2, v3, alpha )

o

fill( value )

o

fill( gray, alpha )

o

fill( values )

o

fill( color )

Parámetros:

  • v1: se utiliza para establecer el valor de rojo o matiz en relación con el rango de color actual.
  • v2: se utiliza para establecer el valor de verde o saturación en relación con el rango de color actual.
  • v3: se utiliza para establecer el valor de azul o brillo en relación con el rango de color actual.
  • alfa: Se utiliza para establecer la transparencia del dibujo.
  • valor: se utiliza para establecer el valor de la string de color.
  • gris: Se utiliza para establecer el valor de gris.
  • valores: Es una array que contiene el valor rojo, verde, azul y alfa.
  • color: Se utiliza para establecer el color del trazo.

Los siguientes ejemplos ilustran la función fill() en p5.js:

Ejemplo 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); 
} 

Producción:

Ejemplo 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); 
} 

Producción:

Referencia: https://p5js.org/reference/#/p5/fill

Publicación traducida automáticamente

Artículo escrito por jit_t y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *