Método Fabric.js sourceFromHsl()

El método sourceFromHsl() se usa para devolver una representación de array de color para los valores de color especificados en formato HSL (tono-saturación-luminosidad) o HSLA (tono-saturación-luminosidad-alfa).

Sintaxis:

sourceFromHsl(color)

Parámetros: este método acepta un parámetro como se mencionó anteriormente y se describe a continuación:

  • color: este parámetro contiene los valores de color especificados en formato HSL o HSLA.

Valor devuelto: este método devuelve una representación de array de valores en formato RGBA (Rojo, Verde, Azul y Alfa) del color para los valores de color especificados en formato HSL o HSLA.

Ejemplo 1:

HTML

<!DOCTYPE html>
<html>
  
<head>
  <!-- Adding the FabricJS library -->
  <script src=
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js">
  </script>
</head>
  
<body>
<script type="text/javascript">
  
 // Calling the sourceFromHsl() function over
 // the color value in HSL and HSLA format
 console.log(fabric.Color.sourceFromHsl("hsl(0, 100%, 50%)"));
 console.log(fabric.Color.sourceFromHsl("hsla(0, 100%, 50%, 0.6)"));
</script>
  
</body>
  
</html>

Producción:

[255,0,0,1]
[255,0,0,0.6]

Ejemplo 2:

HTML

<!DOCTYPE html>
<html>
  
<head>
  <!-- Adding the FabricJS library -->
  <script src=
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js">
  </script>
</head>
  
<body>
<script type="text/javascript">
  
 // Initializing some color values in HSL format
 var A = "hsl(0, 100%, 50%)";
 var B = "hsl(0, 0%, 50%)";
   
 // Initializing some color values in HSLA format
 var C = "hsla(0, 100%, 50%, 0.9)";
 var D = "hsla(0, 0%, 50%, 0.2)";
  
 // Calling the sourceFromHsl() function over
 // the above color values
 console.log(fabric.Color.sourceFromHsl(A));
 console.log(fabric.Color.sourceFromHsl(B));
 console.log(fabric.Color.sourceFromHsl(C));
 console.log(fabric.Color.sourceFromHsl(D));
</script>
  
</body>
  
</html>

Producción:

[255,0,0,1]
[128,128,128,1]
[255,0,0,0.9]
[128,128,128,0.2]

Publicación traducida automáticamente

Artículo escrito por Kanchan_Ray 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 *