Javascript 在四个停止渐变的特定百分比处查找RGB颜色值_Javascript_Colors_Rgb

Javascript 在四个停止渐变的特定百分比处查找RGB颜色值

javascript colors

Javascript 在四个停止渐变的特定百分比处查找RGB颜色值,javascript,colors,rgb,Javascript,Colors,Rgb,问题：我有一个四挡渐变，颜色值分别为0%、33%、66%和100%。我想用一个百分比来找出这个渐变中任何一点的颜色值我想我需要某种多站色调插值，但在我开始写我自己的之前，我想知道是否有一种简单的JavaScript方法可以做到这一点我正在使用的颜色停止： //0% var stop1 = { r: 25, g: 47, b: 97 }; //33% var stop2 = { r: 75, g: 183, b: 183 }; //66% var stop3 = {

问题： 我有一个四挡渐变，颜色值分别为0%、33%、66%和100%。我想用一个百分比来找出这个渐变中任何一点的颜色值

我想我需要某种多站色调插值，但在我开始写我自己的之前，我想知道是否有一种简单的JavaScript方法可以做到这一点

我正在使用的颜色停止：

 //0%
  var stop1 = { r: 25, g: 47, b: 97 };

  //33%
  var stop2 = { r: 75, g: 183, b: 183 };

  //66%
  var stop3 = { r: 237, g: 120, b: 87 };

  //100%
  var stop4 = { r: 209, g: 74, b: 88 };

您可以使用步长间隔的增量，以正确的比率计算颜色

它是如何工作的

例如，我们正在寻找70%的颜色，首先，我们得到

[66, 100]

然后通过以下公式建立比率：

百分比的增量和左间隔（
```
left
```
）
右间隔和百分比的增量（
```
right
```
）
左右间隔的增量（
```
delta
```
）

利用上述生成的比率，可以计算零件的两种颜色之间的正确颜色

  (color of left interval * right + color of right interval * left) / delta => color

对所有颜色重复最后一步并返回结果

工作示例：

*表示给定的颜色，悬停显示百分比值和RGB值

函数getColor（百分比）{ 函数getInterval（范围）{ 功能比率（颜色）{ 返回数学地板（（颜色[范围[0]][颜色]*右+颜色[范围[1]][颜色]*左）/delta）； } 左侧变量=百分比-范围[0]，右=范围[1]-百分比，增量=范围[1]-范围[0]；返回{r:getRatio（'r'），g:getRatio（'g'），b:getRatio（'b'）； } 返回颜色[百分比]| | getInterval（停止.减少（函数（r，a，i，aa））{ 返回a对于（i=0；i我还发现了这个很好的颜色小库：

您尝试过什么吗？如果是，请显示您的尝试。谢谢。

  100 - 70 => 30

  100 - 66 => 34

  (color of left interval * right + color of right interval * left) / delta => color