JavaScript 색상 경사도 와 그 라 데 이 션 효과 1/3 페이지

프로그램 설명[ColorGrads 색상 경사도]프로그램 ColorGrads 의 역할 은 StartColor 와 EndColor 를 통 해 색상 경사도 집합 을 생 성 하 는 것 입 니 다.색깔 은 모두 빨간색(r),녹색(g),파란색(b)세 가지 색깔 로 표시 할 수 있다.프로그램 에서 먼저 GetColor 를 통 해 일반적인 색상 표시 형식 을 빨간색(r),녹색(g),파란색(b)세 가지 색상 값 으로 요소 의 집합 으로 바 꿉 니 다.그렇다면 먼저 어떤 색 의 표현 형식 이 있 는 지 알 아야 한다.w3c 의 Colors 부분 에서 다음 과 같은 형식 을 알 수 있다.키워드 모드:em{color:red}RGB 색상 모드:em{color:\#f00}em{color:\#ff 0000}em{color:rgb(255,0,0)}em{color:rgb(100%,0%,0%)}이상 은 같은 색(빨간색)을 나타 낸다.색상 속성 을 가 져 오 는 형식 은 ie 와 ff 가 다 르 고 ff 는 RGB 색상 모드 의 세 번 째 형식 으로 통일 되 며 ie 는 설정 한 형식 으로 되 돌아 갑 니 다.먼저 RGB 색상 모델 을 말 해 보 세 요.앞의 두 가지 가 자주 사용 되 는 것 은 그들의 차 이 를 잘 알 고 있 을 것 입 니 다.16 진법 으로 형식 을 표시 하고 우 리 는 10 진법 을 원 합 니 다.16 진수 로 표 시 된 문 자 를 10 진수 로 바 꾸 고,일반적으로 parseInt 를 사용 하 며,substr 에서 문 자 를 캡 처 한 후 parseInt 로 변환 할 수 있 습 니 다.\#ff 0000 이라는 형식 에 대해 이렇게 변환 할 수 있 습 니 다

return Map([color.substr(1, 2), color.substr(3, 2), color.substr(5, 2)], 
function(x){ return parseInt(x, 16); } 
) 

parseInt 의 두 번 째 매개 변 수 는 첫 번 째 매개 변수의 진수 값 입 니 다.\#f00 형식 에 대해 서 는 한 가지 차이 가 많 지 않 습 니 다.다만 바 꾸 기 전에 완전한 표현 형식 으로 바 꿔 야 합 니 다

return Map([color.substr(1, 1), color.substr(2, 1), color.substr(3, 1)], 
function(x){ return parseInt(x + x, 16); } 
)

뒤의 두 가지 사용 가능 한 것 이 비교적 적 습 니 다.하 나 는 10 진법 의 rgb 색상 값 으로 표시 하고 다른 하 나 는 백분율 로 표시 합 니 다.ff 는 엄 격 히 그런 형식 으로 표시 하고 ie 는'릴 렉 스'가 많 습 니 다.예 를 들 어 ie 는 숫자 백분율 을 혼용 할 수 있 고 ff 는 안 됩 니 다.ff 는 쉼표 로 구분 되 어야 합 니 다.ie 는 빈 칸 으로 만 구분 할 수 있 습 니 다.물론 우리 가 사용 할 때 는 w3c 의 기준 에 따라 설정 하 는 것 이 가장 좋다.ps:그 DHTML 매 뉴 얼 에 적 힌 EM{color:rgb 1.0 0.0}은 전혀 사용 할 수 없습니다.오도 되 지 마 세 요.이 형식 에 대해 프로그램 은 정규 로 수 치 를 얻 습 니 다.%가 있 으 면 백분율 에 따라 대응 수 치 를 계산 합 니 다.스텝(몇 걸음)에 따라 보폭 을 얻 을 수 있 습 니 다

return Map(color.match(/\d+(\.\d+)?\%?/g), 
function(x){ return parseInt(x.indexOf("%") > 0 ? parseFloat(x, 10) * 2.55 : x, 10); } 
) 

보폭 에 따라 집합 을 생 성 합 니 다

var mapping = {"red":"#FF0000"};//  
color = mapping[color.toLowerCase()]; 
if(color){ 
return Map([color.substr(1, 2), color.substr(3, 2), color.substr(5, 2)], 
function(x){ return parseInt(x, 16); } 
) 
}

정확 한 색상 수 치 는 0 에서 255 사이 이 고 소수 가 없 기 때문에 수정 하 는 것 이 좋 습 니 다

startColor = this.GetColor(this.StartColor), 
endColor = this.GetColor(this.EndColor), 
stepR = (endColor[0] - startColor[0]) / this.Step, 
stepG = (endColor[1] - startColor[1]) / this.Step, 
stepB = (endColor[2] - startColor[2]) / this.Step;

1 2 3 다음 페이지 전문 을 읽다