无聊向 —— RGB彩虹色渐变算法

发表于 | | 阅读次数：

最近在做IFE的课程，其中有一道题是展示队列排序的可视化过程，做好了之后是酱婶的：

有序的部分灰度按照大小排列，感觉有点丑，突然想炫酷一下，做成彩虹色渐变的，红橙黄绿青蓝紫

先搜集到七种颜色的RGB值，放到Excel里统计一下

然后做个图

这个色彩规律看起来还是出乎意料的明朗嘛，全都是线性的
按照初中数学的方法，把图像分成五部分，分段求解，很容易就列出方程来了：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/*省略了外部的setInterval*/
var i=0;                    //当前数据位置
var full=arrData.length;    //数据总数
var r=0;
var g=0;
var b=0;
if(i<full/3){
    r=255;
    g=Math.ceil(255*3*i/full);
    b=0;
}else if(i<full/2){
    r=Math.ceil(750-i*(250*6/full));
    g=255;
    b=0;
}else if(i<full*2/3){
    r=0;
    g=255;
    b=Math.ceil(i*(250*6/full)-750);
}else if(i<full*5/6){
    r=0;
    g=Math.ceil(1250-i*(250*6/full));
    b=255;
}else{
    r=Math.ceil(150*i*(6/full)-750);
    g=0;
    b=255;
}
nLi[i].style.backgroundColor='rgb('+r+','+g+','+b+')';         //将柱体按照算好的RGB值填充
nLi[i].style.color='rgb('+(r-80)+','+(g-80)+','+(b-80)+')';    //柱体上的数字用稍暗的颜色
++i;

完工：

演示地址：http://wzdxy.github.io/ife/t19.html

UPDATE:

原来用 CSS3的HSL 可以直接实现，囧