> 웹 프론트엔드 > JS 튜토리얼 > Javascript 계산 그라디언트 색상 예제 공유

Javascript 계산 그라디언트 색상 예제 공유

小云云
풀어 주다: 2018-02-03 13:43:45
원래의
1957명이 탐색했습니다.

이 글은 주로 자바스크립트에서 그라데이션 색상을 계산하는 예제에 대한 관련 정보를 소개합니다. 이 부분을 이해하고 익히는 데 도움이 되기를 바랍니다. .

그라디언트 색상의 자바스크립트 계산 예

때때로 테이블이나 영역에는 그림과 같이 밝은 색상부터 어두운 색상까지 동일한 색상 시스템의 여러 색상이 필요할 수 있습니다.

색상이 거의 없는 경우 필요하면 색상 차이가 크고, 더 많은 색상이 필요한 경우 아래와 같이 색상 차이가 작습니다. 을 사용하면 알고리즘은 다음과 같습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿