La función stroke() se usa para dibujar las líneas y los bordes alrededor del texto y las formas. El objeto de color se puede configurar en términos de RGB o HSB según el modo de color. 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:
stroke( v1, v2, v3, alpha )
o
stroke( value )
o
stroke( gray, alpha )
o
stroke( values )
o
stroke( 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 stroke() en p5.js:
Ejemplo 1:
function setup() {
// Create Canvas of given size
createCanvas(400, 200);
}
function draw() {
// Set the background color
background(220);
// Set the stroke width
strokeWeight(10);
// Set the stroke
stroke('green');
// Set the filled color
fill('white');
// Draw the circle
circle(90, 90, 34);
// Set the text size
textSize(20);
// Set the text to print
text("GeeksForGeeks", 140, 100);
}
Producción:
Ejemplo 2:
function setup() {
// Create Canvas of given size
createCanvas(400, 200);
}
function draw() {
// Set the background color
background(220);
// Set the stroke clor
stroke('orange');
// Set the stroke width to 10
strokeWeight(30); // Orange
// Draw a line
line(100, 50, 300, 50);
// Set the stroke color
stroke('white');
// Set the stroke width to 8
strokeWeight(30); // White
// Draw a line
line(100, 100, 300, 100);
// Set stroke color
stroke('green');
// Set the stroke width to 6
strokeWeight(30); // Green
// Draw a line
line(100, 150, 300, 150);
}
Producción:
Referencia: https://p5js.org/reference/#/p5/stroke