美文网首页
javascript设置反差色

javascript设置反差色

作者: 奋进小鸟 | 来源:发表于2018-12-27 20:48 被阅读0次

在画图表的时候,我习惯随机产生颜色,不过经常碰到一个问题,背景颜色上面选择显示文字颜色选择很费劲,经常图上文字颜色和背景色很贴近,就很难看清是什么字。
翻了翻资料,找到了一种寻找反差色的js程序,显示效果虽然不完美,但能够解决大部分问题。
方法是通过将RGB转化为HSV(明度、饱和度、色相),然后取得相反的值,再转化为RGB。


function changeColor(temprgb) {

    var temphsv = RGB2HSV(temprgb.replace('#',''));
    temphsv.hue = HueShift(temphsv.hue, 180.0);
    return HSV2RGB(temphsv);
}
function RGB2HSV(rgb) {
    var hsv = new Object();
    r=parseInt(rgb.substr(0,2),16);
    g=parseInt(rgb.substr(2,2),16);
    b=parseInt(rgb.substr(4,2),16);
    max=max3(r,g,b);
    dif=max-min3(r,g,b);
    hsv.saturation=(max==0.0)?0:(100*dif/max);
    if (hsv.saturation==0) hsv.hue=0;
    else if (r==max) hsv.hue=60.0*(g-b)/dif;
    else if (g==max) hsv.hue=120.0+60.0*(b-r)/dif;
    else if (b==max) hsv.hue=240.0+60.0*(r-g)/dif;
    if (hsv.hue<0.0) hsv.hue+=360.0;
    hsv.value=Math.round(max*100/255);
    hsv.hue=Math.round(hsv.hue);
    hsv.saturation=Math.round(hsv.saturation);
    return hsv;
};


function HSV2RGB(hsv) {
    var r=0;
    var g=0;
    var b=0;
    if (hsv.saturation==0) {
        r=g=b=Math.round(hsv.value*2.55);
    } else {
        hsv.hue/=60;
        hsv.saturation/=100;
        hsv.value/=100;
        i=Math.floor(hsv.hue);
        f=hsv.hue-i;
        p=hsv.value*(1-hsv.saturation);
        q=hsv.value*(1-hsv.saturation*f);
        t=hsv.value*(1-hsv.saturation*(1-f));
        switch(i) {
            case 0: r=hsv.value; g=t; b=p; break;
            case 1: r=q; g=hsv.value; b=p; break;
            case 2: r=p; g=hsv.value; b=t; break;
            case 3: r=p; g=q; b=hsv.value; break;
            case 4: r=t; g=p; b=hsv.value; break;
            default: r=hsv.value; g=p; b=q;
        }
        r=Math.round(r*255);
        g=Math.round(g*255);
        b=Math.round(b*255);
        a=0.9;
    }
    return 'rgba('+r+','+g+','+b+','+a+')';
};

function HueShift(h,s) {
    h+=s;
    while (h>=360.0) {h-=360.0;}

    while (h<0.0) {h+=360.0; }

    return h;
};

function min3(a,b,c) {
    return (a<b)?((a<c)?a:c):((b<c)?b:c);
};
function max3(a,b,c) {
    return (a>b)?((a>c)?a:c):((b>c)?b:c);
};

利用上面这段,我顺便把#ff0000的RGB格式给转成了rgba(255,0,0,0.8)的RGBA格式了。

附php生成随机颜色的程序,含生成一个颜色数组的程序:

public function randColorArray($count)
{
    $array=[];
    for($i = 0;$i<$count;$i++){
        array_push( $array,$this->randColor(1));
    }
    return $array;
}

public function randColor($aplha){

    $colors = array();
    do {
        for($i = 0;$i<3;$i++){
            $colors[$i] =16*rand(0,15);
        }
    }while($colors[0]==$colors[1] and $colors[0]==$colors[2]);
    return 'rgba('.implode(',',$colors).','.$aplha.')';
}

相关文章

网友评论

      本文标题:javascript设置反差色

      本文链接:https://www.haomeiwen.com/subject/omwdlqtx.html