JavaScript 색상 그라데이션 및 그라데이션 효과 페이지 1/3_javascript 기술

프로그램 설명
[ColorGrads Color Gradient]
ColorGrads 프로그램의 기능은 StartColor 및 EndColor를 통해 설정된 색상 그라데이션을 생성하는 것입니다.
색상은 빨간색(r), 녹색(g), 파란색(b)의 세 가지 색상으로 표현할 수 있습니다.
프로그램에서는 먼저 GetColor를 통해 빨간색(r), 녹색(g), 파란색(b)의 세 가지 색상 값을 요소로 사용하여 일반 색상 표현을 세트로 변환합니다.
그러면 먼저 w3c의 색상 섹션에서 다음과 같은 형식이 있음을 알 수 있습니다.
키워드 모드:
em { color: red }
RGB 색상 모드:
em { 색상: #f00 }
em { 색상: #ff0000 }
em { 색상: rgb(255,0,0) }
em { 색상: rgb(100% , 0%, 0 %) }
위는 모두 같은 색상(빨간색)을 나타냅니다.
색상 속성을 얻는 형식은 ie와 ff가 다릅니다. ff는 RGB 색상 모드의 세 번째 형식을 균일하게 반환하는 반면, ie는 설정의 형식을 반환합니다.
먼저 RGB 색상 모드에 대해 이야기해 보겠습니다. 처음 두 가지는 더 일반적으로 사용되며 차이점을 이해해야 합니다. 이는 16진수 표현을 사용하며 우리는 10진수를 사용합니다.
16진수 문자를 10진수로 변환하려면 일반적으로 구문 분석기(parseInt)를 사용합니다. substr이 문자를 가로채면 변환에 구문 분석기(parseInt)를 사용할 수 있습니다.
#ff0000 형식은 다음과 같이 변환할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

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

parseInt의 두 번째 매개변수는 첫 번째 매개변수의 기본 값입니다.
#f00 형식의 경우 변환 전에 완전한 표현으로 변환해야 한다는 점을 제외하면 이전 형식과 거의 동일합니다.

코드 복사 코드는 다음과 같습니다:

return Map([color.substr(1, 1), color.substr(2, 1), color.substr(3, 1) )],
function(x){ 표현하려면parseInt(x)를 반환합니다.
ff는 해당 형식으로 엄격하게 표현되지만 ie는 훨씬 더 "완화"됩니다. 예를 들어
ie는 숫자와 백분율을 혼합할 수 있지만 ff는 허용되지 않습니다.

ff는 쉼표로 구분해야 합니다. 즉, 공백만 사용할 수 있습니다.

물론 사용할 때는 w3c 표준에 따라 설정하는 것이 가장 좋습니다.
ps: DHTML 매뉴얼에 기재된 EM { color: rgb 1.0 0.0 0.0 } 은 전혀 사용할 수 없습니다.
이 형식의 경우 프로그램은 정규식을 사용하여 값을 얻습니다. %가 있는 경우 해당 값은 백분율을 기준으로 계산됩니다.




code

코드는 다음과 같습니다:

return Map(color.match(/d (.d )?%?/g), function(x){ returnparseInt(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); }
)
}



Create color set 프로그램에서 시작 색상과 끝 색상 데이터를 얻은 후 다음을 기준으로 단계 길이를 얻을 수 있습니다. 단계(단계 수):

코드 복사

코드는 다음과 같습니다.

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;



그런 다음 집합을 생성합니다. 단계 크기에 따라:

코드 복사

코드는 다음과 같습니다:

for(var i = 0, n = this.Step, r = startColor[0], g = startColor[2] i < n; i ){ colors.push([r, g, b]); r = stepR; g = stepG; b = stepB; }

colors.push(endColor);

올바른 색상 값은 0에서 255 사이입니다. 는 소수가 아니므로 수정하는 것이 가장 좋습니다.

코드 복사

코드는 다음과 같습니다.

return Map(colors, function(x){ return Map(x, function(x){ return Math.min(Math.max( 0, Math.floor(x)), 255); }) ;});