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; 
}

관련 권장 사항:

html5 캔버스 그리기 방사성 그라데이션 색상 효과 코드 예

CSS3의 색상 값 RGBA 및 그라데이션 색상에 대한 자세한 설명(그림)

div+css 배경 그라데이션 색상 코드 예

위 내용은 Javascript 계산 그라디언트 색상 예제 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!