JS 处理十六进制颜色渐变算法-输入颜色,输出渐变rgb数组

2017-01-12 19:03:39来源:cnblogs.com作者:SweetMemory人点击

html颜色有几种表示方式:

英文单词颜色值:background-color:Blue;
十六进制颜色值:background-color:#FFFFFF; 
RGB颜色值三元数字:background-color:rgb(255,255,255)
RGB颜色值三元百分比:background-color:rgb(100%,100%,100%)

本文讲述输入两个十六进制颜色,输出rgb渐变数组的算法。

 html部分:

<body>    <form id="form1" runat="server">    <div id ="test_color">    </div>    </form></body>

JavaScript部分:

渐变色处理函数思路:

已知:RStart=50,REnd=200,RStart、REnd之间平均分成3份(Step=3),求每份的数值(StepN)分别是多少。

公式:Gradient = RStart+ (REnd-RStart) / Step * N (第N步的颜色rgb中R的值)

实现方法非常简单,只是需要将颜色从rgb到hex的互转。

   输入:

     startColor:  十六进制开始颜色

     endColor:  十六进制结束颜色

     step: 渐变分的步数

   输出:渐变颜色rgb数组

 function gradientColor(startColor, endColor, step) {        startRGB = this.colorRgb(startColor);//转换为rgb数组模式        startR = startRGB[0];        startG = startRGB[1];        startB = startRGB[2];        endRGB = this.colorRgb(endColor);        endR = endRGB[0];        endG = endRGB[1];        endB = endRGB[2];        sR = (endR - startR) / step;//总差值        sG = (endG - startG) / step;        sB = (endB - startB) / step;        var colorArr = [];        for (var i = 0; i < step; i++) {            //计算每一步的hex值             var hex = this.colorHex('rgb('+ parseInt((sR * i + startR))+ ',' + parseInt((sG * i + startG))+ ',' + parseInt((sB * i + startB)) + ')');            colorArr.push(hex);        }        return colorArr;    }

渐变色函数属性:

  // 将hex表示方式转换为rgb表示方式(这里返回rgb数组模式)    gradientColor.prototype.colorRgb = function (sColor) {        var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;        var sColor = sColor.toLowerCase();        if (sColor && reg.test(sColor)) {            if (sColor.length === 4) {                var sColorNew = "#";                for (var i = 1; i < 4; i += 1) {                    sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));                }                sColor = sColorNew;            }            //处理六位的颜色值            var sColorChange = [];            for (var i = 1; i < 7; i += 2) {                sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));            }            return sColorChange;        } else {            return sColor;        }    };    // 将rgb表示方式转换为hex表示方式    gradientColor.prototype.colorHex = function (rgb) {        var _this = rgb;        var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;        if (/^(rgb|RGB)/.test(_this)) {            var aColor = _this.replace(/(?:(|)|rgb|RGB)*/g, "").split(",");            var strHex = "#";            for (var i = 0; i < aColor.length; i++) {                var hex = Number(aColor[i]).toString(16);                hex = hex < 10 ? 0 + '' + hex : hex;// 保证每个rgb的值为2位                if (hex === "0") {                    hex += hex;                }                strHex += hex;            }            if (strHex.length !== 7) {                strHex = _this;            }            return strHex;        } else if (reg.test(_this)) {            var aNum = _this.replace(/#/, "").split("");            if (aNum.length === 6) {                return _this;            } else if (aNum.length === 3) {                var numHex = "#";                for (var i = 0; i < aNum.length; i += 1) {                    numHex += (aNum[i] + aNum[i]);                }                return numHex;            }        } else {            return _this;        }    }


页面加载脚本,生成div,输入开始颜色,结束颜色,生成渐变色数组,赋值为背景色,

    window.onload = function(){        var gradient = new gradientColor('#FF0000', '#00FF00', 101);        console.log(gradient);        //alert(gradient);        for(var i= 0,j= 0;i<=100;i++){            var div = document.createElement("div");            div.style.position = "absolute";            div.style.width = "50px";            div.style.height = "50px";            div.style.left = ((i%10)*50+10)+"px";            div.style.border = "1px solid #ddd";            div.style.backgroundColor = gradient[i];            div.innerText = i;            if(i%10==0){                ++j;            }            div.style.top = ((j-1)*50+10)+"px";            document.body.appendChild(div);        }    }

生成的结果如下图:

从红色渐变为绿色:

 

参考: http://yanue.net/post-80.html

 

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台