js 색상 계단 그 라 데 이 션 효과 구현(Gradient 알고리즘)

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<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;
  }
 }
 var gradient = new gradientColor('#013548','#554851',10);
 console.log(gradient);//     
 alert(gradient);
</script>

이상 은 본 고의 모든 내용 입 니 다.본 고의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.또한 저 희 를 많이 지지 해 주시 기 바 랍 니 다!