無聊向 —— RGB彩虹色漸變算法

最近在做IFE的課程，其中有一道題是展示隊列排序的可視化過程，做好了之后是醬嬸的：

有序的部分灰度按照大小排列，感覺有點丑，突然想炫酷一下，做成彩虹色漸變的，紅橙黃綠青藍紫

先搜集到七種顏色的RGB值，放到Excel里統計一下

然后做個圖

這個色彩規律看起來還是出乎意料的明朗嘛，全都是線性的

按照初中數學的方法，把圖像分成五部分，分段求解，很容易就列出方程來了：

/*省略了外部的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

---

原來用 CSS3的HSL 可以直接實現，囧