极客教程Fabric.js sourceFromHsl() 方法
sourceFromHsl() 方法 用于返回HSL（色调-饱和度-亮度）或HSLA（色调-饱和度-亮度-透明度）格式中指定颜色数值的数组表示形式。
语法：
sourceFromHsl(color)
参数: 该方法接受一个参数，如上所述，并在下面进行了描述：
- color: 该参数以HSL或HSLA格式保存指定的颜色值。
返回值: 该方法以RGBA（红绿蓝和透明度）格式返回指定颜色值的颜色数组表示。
示例1:
<!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>
输出：
[255,0,0,1]
[255,0,0,0.6]
示例2：
<!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>
输出:
[255,0,0,1]
[128,128,128,1]
[255,0,0,0.9]
[128,128,128,0.2]