欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

如何用javascript计算渐变颜色

程序员文章站 2022-07-10 22:30:47
...
有时候,一个表格或者一片区域内,需要若干同色系从浅到深的颜色,如图所示:
如何用javascript计算渐变颜色
            
    
    博客分类: javascript算法 颜色渐变javascript 
如果需要的颜色少,则颜色的差异较大,需要的颜色多,则颜色差异小,如下图:

如何用javascript计算渐变颜色
            
    
    博客分类: javascript算法 颜色渐变javascript 


如何用javascript计算渐变颜色
            
    
    博客分类: javascript算法 颜色渐变javascript 

这时,就用到了同色系渐变颜色的计算,算法如下:

function getItemColors (colorLevel) {
    var colors= [];
    //默认的最深颜色
    var red = 134,green = 108, blue = 184;
    //最浅颜色是239,239,239 比如:最浅颜色的red是 239 则差值为239-134=105
    var maxRed = 105,maxGreen = 131,maxBlue = 55;
    var level = colorLevel;
    while(level--) {
       colors.push( 'rgb('+red +','+green+','+blue+')');
       red += parseInt(maxRed/colorLevel);
       green += parseInt(maxGreen/colorLevel);
       blue += parseInt(maxBlue/colorLevel);
    }
    return colors;
}

改进版:
/**
* color1,color2 数组 ,行如[233,239,239] 分别为红 绿 蓝,对应rgb(73,238,343) 中的*三个颜色
*colorLevel 要返回的颜色个数
**/
function getItemColors (color1,color2,colorLevel) {  
    var colors= [];  
    //默认的最深颜色
    var red = color1[0],green = color1[1], blue = color1[2];  
    //最浅颜色是239,239,239 比如:最浅颜色的red是 239 则差值为239-134=105
    var maxRed = color2[0],maxGreen = color2[1],maxBlue = color2[2];  
    var level = colorLevel;  
    while(level--) {  
       colors.push( 'rgb('+red +','+green+','+blue+')');  
       red += parseInt(maxRed/colorLevel);  
       green += parseInt(maxGreen/colorLevel);  
       blue += parseInt(maxBlue/colorLevel);  
    }  
    return colors;  
} 

*&**&**&**&**&**&**&**&**&**&*喜庆的分割线*&**&**&**&**&**&**&**&**&**&**&**&*
马上就要结婚了,开心
  • 如何用javascript计算渐变颜色
            
    
    博客分类: javascript算法 颜色渐变javascript 
  • 大小: 5.8 KB
  • 如何用javascript计算渐变颜色
            
    
    博客分类: javascript算法 颜色渐变javascript 
  • 大小: 2.7 KB
  • 如何用javascript计算渐变颜色
            
    
    博客分类: javascript算法 颜色渐变javascript 
  • 大小: 3 KB