0717-7821348
新闻中心

爱彩人彩票网大乐透

您现在的位置: 首页 > 新闻中心 > 爱彩人彩票网大乐透
怎么更有逼格的用JS操控CSS色彩?
2019-05-11 23:11:08



作者 | Adam Giese

译者 | 王强

CSS 中有两种色彩模型 RGB 和 HSL,怎么用 JavaScript 操控它们?

布景常识:色彩模型

点开这篇文章的你,肯定是想要学习怎样操控色彩的——咱们后边就会讲具体操作。但首要,咱们需求对 CSS 怎么符号色彩有一个根本的知道。CSS 运用的是两种色彩模型:RGB 和 HSL,咱们先简略了解一下。

1、RGB

RGB 便是“赤色,绿色,蓝色”的简称。这个模型由三个数字组成,每个数字表明其所代表的色彩在终究生成的色彩中有多高的亮度。在 CSS 中,每个数值的规模都是 0-255,三个数值间用逗号分隔,作为 CSS rgb 函数的参数,例如:rgb(50,100,0)。

RGB 是一种“增量”色彩系统。这意味着每个数字越高,终究生成的色彩就越亮。假如一切值都持平就生成灰度色彩;假如一切值都为零,成果为黑色;假如一切值都是 255,则成果为白色。

此外你也能够运用十六进制表明法来符号 RGB 色彩,其间每种色彩的数值从 10 进制转化为 16 进制。例如,rgb(50,100,0)用 16 进制就写成#326400。

尽管我个人比较习气运用 RGB 模型(特别是十六进制),但我也常常发现它不易阅览,也不简单操作。下面来看 HSL 模型。

2、HSL

HSL(https://codepen.io/AdamGiese/full/989988044f3b8cf6403e3c60f56dd612)是“色彩,饱和度,光线”的简称,HSL 也包括三个值。色彩值对应于色轮上的点,由 CSS 视点值表明,最常用的是度数单位。

饱和度以百分比表明,是指色彩的强度。当饱和度为 100%时色彩最深,饱和度越低,色彩越浅,直到灰度为 0%。

亮度也以百分比表明,指的是色彩有多亮。“惯例”的亮度是 50%。不管色彩和饱和度值怎么,100%的亮度都是纯白色,0%的亮度便是纯黑色。

我觉得 HSL 模型更直观一些,色彩之间的联系愈加显着,操控色彩时只需简略地调整几个数字就能够了。

3、色彩模型之间的转化

RGB 和 HSL 色彩模型都将色彩分解为各种特点。要在不同模型之间进行转化,咱们首要需求核算这些特点。

除了色彩,上面说到的一切数值都能够表明为百分比。就连 RGB 值也是用字节表明的百分比。在下面说到的公式和函数中,这些百分比将由 0 到 1 之间的小数来表明。

这儿提一下,我并不会深化探讨这些数学常识;相比之下,我将扼要介绍一遍原始数学公式,然后将其转化为 JavaScript 格局。

4、从 RGB 模型中核算亮度

亮度是三个 HSL 值中最简单核算的一个。其数学式如下,其间 M 是 RGB 值的最大值,m 是最小值:

亮度的数学式

用 JavaScript 函数写成下面的方法:

const rgbToLightness =(r,g,b)=>
1/2 *(Math.max(r,g,b)+ Math.min(r,g,b));

5、从 RGB 模型中核算饱和度

饱和度仅比亮度略微杂乱一些。假如亮度为 0 或 1,则饱和度值为 0;不然,它依据下面的数学公式核算得出,其间 L 表明亮度:

饱和度的数学式

写成 JavaScript:

const rgbToSaturation = (r,g,b) => {
const L = rgbToLightness(r,g,b);
const max = Math.max(r,g,b);
const min = Math.min(r,g,b);
return (L === 0 || L === 1)
? 0
: (max - min)/(1 - Math.abs(2 * L - 1));
};

6、从 RGB 模型中核算色彩

从 RGB 坐标中核算色彩视点的公式有点杂乱:

色彩的数学式

写成 JavaScript:

const rgbToHue = (r,g,b) => Math.round(
Math.atan2(
Math.sqrt(3) * (g - b),
2 * r - g - b,
) * 180 / Math.PI
);

最终 180 / Math.PI 的算法是将成果从弧度转化为度。

7、核算 HSL

上面这些函数都能够包括在同一个功用函数里:

const rgbToHsl = (r,g,b) => {
const lightness = rgbToLightness(r,g,b);
const saturation = rgbToSaturation(r,g,b);
const hue = rgbToHue(r,g,b);
return [hue, saturation, lightness];
}

8、从 HSL 模型中核算 RGB 值

开端核算 RGB 之前,咱们需求一些条件值。

首要是“色度”值:

色度的数学式

还有一个暂时的色彩值,咱们将用它来确认咱们所属的色彩圈的“段”:



色彩区间的数学式


接下来,咱们设一个“x”值,它将用作中心(第二大)组件值:

暂时“x”值的数学式

咱们再设一个“m”值,用于调整各个亮度值:

亮度匹配的数学式

依据色彩区间值,r,g 和 b 值将映射到 C,X 和 0:

RGB 值的数学式,不考虑亮度

最终,咱们需求映射每个值以调整亮度:

用 RGB 来解说亮度的数学式

将上面这些都写到 JavaScript 函数中:

const hslToRgb = (h,s,l) => {
const C = (1 - Math.abs(2 * l - 1)) * s;
const hPrime = h / 60;
const X = C * (1 - Math.abs(hPrime % 2 - 1));
const m = l - C/2;
const withLight = (r,g,b) => [r+m, g+m, b+m];
if (hPrime <= 1) { return withLight(C,X,0); } else
if (hPrime <= 2) { return withLight(X,C,0); } else
if (hPrime <= 3) { return withLight(0,C,X); } else
if (hPrime <= 4) { return withLight(0,X,C); } else
if (hPrime <= 5) { return withLight(X,0,C); } else
if (hPrime <= 6) { return withLight(C,0,X); }
}

9、创立色彩目标

为了便于在操作特点时拜访,咱们将创立一个 JavaScript 目标。把前面说到的这些函数打包起来就能创立这个目标:

const rgbToObject = (red,green,blue) => {
const [hue, saturation, lightness] = rgbToHsl(red, green, blue);
return {red, green, blue, hue, saturation, lightness};
}
const hslToObject = (hu怎么更有逼格的用JS操控CSS色彩?e, saturation, lightness) => {
const [red, green, blue] = hslToRgb(hue, saturation, l怎么更有逼格的用JS操控CSS色彩?ightness);
return {red, green, blue, hue, saturation, lightness};
}

10、示例

我强烈建议你花些时刻看看这个示例:

https://codepen.io/AdamGiese/full/86b353c35a8bfe0868a8b48683怎么更有逼格的用JS操控CSS色彩?faf668

从中了解调理各个特点时其它特点怎么发生变化,这样能协助你更深化地了解两种色彩模型是怎么对应的。

色彩操控

现在咱们现已知道怎样在色彩模型之间进行转化了,那么就来看看该怎么操控这些色彩!

1、更新特点

咱们说到的一切色彩特点都能够独自操控,回来一个新的色彩目标。例如,咱们能够编写一个旋转色彩视点的函数:

const rotateHue = rotation => ({hue, ...rest}) => {
const modulo = (x, n) => (x % n + n) % n;
const newHue = modulo(hue + rotation, 360);
return { ...rest, hue: newHue };
}

rotateHue 函数会承受一个旋转参数并回来一个新函数,该函数承受并回来一个色彩目标。这样就能够轻松创立新的“旋转”函数:

const rotate30 = rotateHue(30);
const getComplementary = rotateHue(180);
const getTriadic = color => {
const first = rotateHue(120);
const second = rotateHue(-120);
return [first(color), second(color)];
}

用这种方法怎么更有逼格的用JS操控CSS色彩?,你也能够编写加深或提亮色彩的函数——或许反过来,减淡或变暗也行。

const saturate = x => ({saturation, ...rest}) => ({
...rest,
saturation: Math.min(1, saturation + x),
});
const desaturate = x => ({saturation, ...rest}) => ({
...rest,
saturation: Math.max(0, saturation - x),
});
const lighten = x => ({lightness, ...rest}) => ({
...rest,
lightness: Math.min(1, lightness + x)
});
const darken = x => ({lightness, ...rest}) => ({
...rest,
lightness: Math.max(0, lightness - x)
});

2、色彩谓词

除了色彩操控以外,你还能够编写“谓词”——亦即回来布尔值的函数。

const isGrayscale = ({saturation}) => saturation === 0;
const isDark = ({lightness}) => lightness < .5;

3、处理色彩数组

过滤器

JavaScript [] .filter 方法会承受一个谓词并回来一个新数组,其间包括一切“传递”的元素。咱们在上一节中编写的谓词能够用在这儿:

const colors = [/* ... an array of color objects ... */];
const isLight = ({lightness}) => lightness > .5;
const lightColors = colors.filter(isLight);

排序

要对色彩数组进行排序,首要需求编写一个“比较器”函数。此函数承受一个数组的两个元素并回来一个数字来表明“赢家”。正数表明第一个元素应该先排序,而负数表明第二个元素应该先排序。零值表明平局。

例如,这是一个比较两种色彩亮度的函数:

const compareLightness = (a,b) => a.li艾莉莉ghtness - b.lightness;

这是一个比较饱和度的函数:

const compareSaturation = (a,b) => a.saturation - b.saturation;

为了避免代码重复,咱们能够编写一个高阶函数来回来一个比较函数来比照各种特点:

const compareAttribute = attribute =>
(a,b) => a[attribute] - b[attribute];
const compareLightness = compareAttribute('lightness');
const compareSaturation = compareAttribute('saturation');
const compareHue = compareAttribute('hue');

均匀特点

你能够调配各种 JavaScript 数组方法来平衡色彩数组中的特定特点。首要,你能够运用 reduce 求和并用 Array length 特点分割来核算一个特点的均值:

const colors = [/* ... an array of color objects ... */];
const toSum = (a,b) => a + b;
const toAttribute = attribute => element => element[attribute];
const averageOfAttribute = attribute => array =>
array.map(toAttribute(attribute)).reduce(toSum) / array.length;

你能够用它来“规范化”一组色彩:

/* ... continuing */
const normalizeAttribute = attribute => array => {
const averageValue = averageOfAttribute(attribute)(array);
const normalize = overwriteAttribute(attribute)(averageValue);
return normalize(array);
}
const normalizeSaturation = normalizeAttribute('saturation');
const normalizeLightness = normalizeAttribute('lightness');
const normalizeHue = normalizeAttribute('hue');

4、定论

色彩是网络不可或缺的一部分。将色彩分解为特点就能够灵敏操控它们,并创造出无限的或许。

检查英文原文:

https://blog.logrocket.com/how-to-manipulate-css-colors-with-javascript-fb547113a1b8

福利引荐

前端范畴的技能演进一向要比其他技能快一些,这给前端工程师带来继续的应战。这儿整理了从 Vue 到 React、iOS 到 Andoid、再到前端架构系统的干货课程,带你解读从前端小工到专家的实战心法,高效处理 80% 的开发难题。