为何门店要用小程序_js完成颜色阶梯突变效果(

2021-01-12 12:50| 发布者: | 查看: |

js实现颜色阶梯渐变效果(Gradient算法)       在色彩中,色相、明度、纯度也都可以产生渐变效果,并会表现出具有丰富层次的美感。本文主要讲述两种颜色RGB数值的梯级渐变算法。下面跟着小编一起来看下吧

html中颜色可以使用rgb和hex方式来表示。

在色彩中,色相、明度、纯度也都可以产生渐变效果,并会表现出具有丰富层次的美感。本文主要讲述两种颜色RGB数值的梯级渐变算法。

其中如如16进制颜色如#336600分别表示rgb模式中r的值为16进制33(即),g的值为16进制的66,和b为16进制的00,转换后用rgb完整表述为:rgb(51,102,0)。

其中使用16进制进行加减乘除不方便,尤其还使用了rgb的16进制颜色组合(#336600)。因此我们可以将16进制转换为rgb单个进行梯级运算在进行组合。

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

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

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

实现代码:

 script type="text/javascript" 
 // 作者 yanue
 // 参数:
 // startColor:开始颜色hex
 // endColor:结束颜色hex
 // step:几个阶级(几步)
 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 i+=1){
 sColorNew += sColor.slice(i,i+1).concat(sColor.slice(i,i+1));
 sColor = sColorNew;
 //处理六位的颜色值
 var sColorChange = [];
 for(var i=1; i 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;
 var gradient = new gradientColor('#013548','#554851',10);
 console.log(gradient);//控制台输出
 alert(gradient);
 /script 

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持凡科!


<
>

 
QQ在线咨询
售前咨询热线
18720358503
售后服务热线
18720358503
返回顶部