Javascript - 生成相同颜色的不同阴影
Posted
技术标签:
【中文标题】Javascript - 生成相同颜色的不同阴影【英文标题】:Javascript - Generate Different Shades of the Same Color 【发布时间】:2017-03-29 21:42:15 【问题描述】:我希望能够调用一个函数,该函数采用基色并返回对应于相同颜色的不同阴影的值数组。该数组可以包含十六进制值或 rgba() 值。我也希望能够输入所需阴影的数量。然后,阴影的数量也可以用作增加阴影的度量。例如,如果我希望输出具有 3 种不同的阴影,则第一个阴影将是底色的 1/3。但是数学会起作用...此外,在某些情况下,第一个阴影可能需要 100% 透明,所以我愿意接受初始 alpha 的参数。我已经组织了我认为该函数的基本逻辑,但数学对我来说还不清楚。
var buildColorStops = function (baseColor,numberOfValues,initialAlpha)
var b = baseColor;
var n = numberOfValues //expected number of colors in the output. If n was 3 results would be [light blue, blue(base), dark blue] (# or rgba will work)
var d = 1 / n; // if number of values was 5 d would represent 1/5 of the base.
var ia = initialAlpha; // some situations may require the first color to be 100% transparent
var outputArray = [];
var i = 0;
while (i < n)
if (i == 0)
//...math on base color & incorporate initial alpha
outputArray.push("result of math on base")
else
//...math on base color by incrementing d or 1/n
outputArray.push("result of math on base")
return outputArray;
// end of buildColorStops
【问题讨论】:
你搜索了吗? ***.com/questions/5560248/… 你能补充一些例子吗? 您也可以通过操作数字来简单地更改 hsl,并从中生成 CSS 字符串 【参考方案1】:可以通过保持颜色的比例相同来生成阴影。假设您的基色具有(r,g,b)
红色、绿色、蓝色值。
所以组件之间的比率是r:g:b
。如果你想生成 10 种色调,那么你的色调就是。
(r/10, g/10, b/10)
(2*r/10, 2*g/10, 2*b/10)
(3*r/10, 3*g/10, 3*b/10)
(4*r/10, 4*g/10, 4*b/10) and so on
那是深色的。
浅色系
(11*r/10, 11*g/10, 11*b/10)
(12*r/10, 12*g/10, 12*b/10)
(13*r/10, 13*g/10, 13*b/10) and so on
检查 r、g、b 的结果值,使其不超过 255,因为减轻它们会增加它们的值。
事实上,为了避免超过 255,您可以检查 r、g、b 中的最大值,然后使用该值生成阴影。
var max = Math.max(Math.max(r, Math.max(g,b)), 1);
var step = 255 / (max * 10)
(r * step, g * step, b * step)
(r * step * 2, g * step * 2, b * step * 2)
(r * step * 3, g * step * 3, b * step * 3)
【讨论】:
我今天注意到,在最后一个代码块中,step
公式对我来说没有意义。我不知道我当时在想什么。但我认为应该是255 / (max*10)
而不是(255 - max) / 10
。编辑了答案。
为了防止除零异常(step = infinity)
当颜色为 0:0:0 时,将var max = Math.max(r,Math.max(g,b));
更改为var max = Math.max(Math.max(r, Math.max(g,b)), 1);
[查看小提琴][1] [1]: jsfiddle.net/FWeise/3kgLhanv
谢谢,按照您的建议修复了
不错。在(r * step * 3, g * step * 3, b * step * 3)
中3
是什么意思?
表示第三种颜色。代码显示了创建 10 种阴影的示例。第一个乘以step * 1
,第二个乘以step * 2
,第三个乘以step * 3
,依此类推。以上是关于Javascript - 生成相同颜色的不同阴影的主要内容,如果未能解决你的问题,请参考以下文章
尽管使用相同的 RGB,Xcode 仍将颜色渲染为更深的几个阴影