如何动态计算梯度百分比答案

【问题标题】：How to dynamically calculate gradient percentage如何动态计算梯度百分比
【发布时间】：2022-01-20 02:35:35
【问题描述】：

我有一个数组，其中包含来自服务器的动态值

let arr = ['#eee','#fff','#aaa']
or sometimes,
let arr = ['#eee','#fff','#aaa','#eee','#fff','#aaa']

现在，我需要计算颜色均匀分布的渐变值。我做了类似下面的事情，它给出了一些错误的值。

let arr = ['#eee','#fff','#aaa','#eee','#fff','#aaa']

let gper = parseFloat(100/arr.length)

let c_arr = arr.map((k, i) => {  return `${k} ${parseFloat(gper * i--)}% ${parseFloat(gper * i)}%`})
               .toString()
               
console.log(`linear-gradient(to left, ${c_arr})`)

有没有最好的办法解决这个问题

【问题讨论】：

什么的百分比？您正在寻找特定颜色通道的 0 到 255 之间的值百分比？
@Brad 请参考这里了解更多关于线性梯度百分比developer.mozilla.org/en-US/docs/Web/CSS/gradient/…
@Brad 这里是一个例子background : linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);

标签： javascript css arrays

【解决方案1】：

如果您想在渐变中均匀分布颜色，则根本不需要指定百分比。浏览器默认会这样做。

你可以简单地做这样的事情：

`linear-gradient(to left, ${arr.join()})`

【讨论】：

对不起我的英语，我不想褪色。我的意思是颜色应该显示为框。像红色|黄色|绿色。上面的东西会混合并淡化边缘的颜色。
我需要这个造型developer.mozilla.org/en-US/docs/Web/CSS/gradient/…

【解决方案2】：

计算只需稍作改动 - 在问题中，第一个值变为负数。

这个 sn-p 在循环中拼写出来只是为了让它更清楚一点 - 值需要从 0 而不是 -gper 开始。

let arr = ['#eee', '#fff', '#aaa', '#eee', '#fff', '#aaa']

let gper = parseFloat(100 / arr.length)

let c_arr = '';
for (let i = 0; i < arr.length; i++) {
  c_arr += ((i == 0) ? '' : ', ') + arr[i] + ' ' + i * gper + '%' + ' ' + (i + 1) * gper + '%';
}
console.log(`linear-gradient(to left, ${c_arr})`);

结果是：

linear-gradient(to left, #eee 0% 16.666666666666668%, #fff 16.666666666666668% 33.333333333333336%, #aaa 33.333333333333336% 50%, #eee 50% 66.66666666666667%, #fff 66.66666666666667% 83.33333333333334%, #aaa 83.33333333333334% 100%)

【讨论】：