javascript_javascript 기술로 색상 그라데이션을 구현하는 방법-JS 튜토리얼-php.cn

javascript_javascript 기술로 색상 그라데이션을 구현하는 방법

WBOY

풀어 주다： 2016-05-16 17:18:19

원래의

1135명이 탐색했습니다.

그라데이션은 미학에서 중요한 형식적 아름다움의 법칙이며, 이에 대응하는 것이 돌연변이입니다. 모양, 크기, 위치, 방향, 색상 및 기타 시각적 요소에 그라데이션이 적용될 수 있습니다. 색상, 색조, 밝기, 순도에서도 그라데이션 효과를 만들어내며 풍부한 아름다움을 보여줄 수 있습니다. 이 기사에서는 주로 두 가지 색상의 RGB 값에 대한 그라데이션 알고리즘을 설명합니다.

알려진 값: A=50, B=200, A와 B를 3개의 부분으로 균등하게 나누고(Step=3), 각 부분의 값을 구합니다(StepN).

공식: 기울기 = A(B-A) / 단계 * N

참고] 프로그래밍 시 효율성을 높이고 부동 소수점 연산을 피하기 위해 나눗셈을 마지막에 배치하는 경우가 많으므로 공식은 다음과 같습니다. Gradient = A (B-A) * N / Step

Step=3일 때 공식에 따르면 Step1=A(A-B)/3*1=50(200-50)/3=100, Step2=A(A-B)/3*2=50(200- 50)/3*2=150. 이것이 균일 기울기의 알고리즘 원리입니다. 아주 간단한 초등학교 지식입니다.

두 색상의 그라데이션은 두 색상의 RGB 채널을 각각 계산하는 것입니다. 예를 들어 두 색상은 RGB(200,50,0) 및 RGB(50,200,0)입니다.

RStep1=RA=RA(BA-RA)/단계*N=200(50-200)/3*1=200-50=150

GStep1=GA=GA(GA-GA)/단계*N=50(200-50)/3*1=50 50=100

BStep1=BA=BA(BA-BA)/단계*N=0

따라서 RGBStep1=(150,100,0), 동일한 방법을 사용하여 RGBStep2=(100,150,0)을 찾을 수 있습니다.

웹 페이지의 그라데이션 텍스트 효과가 생성되는 방식입니다. 예를 들어, 웹 페이지의 HTML에 다음과 같은 코드가 있습니다. You are the Most beautiful Rainbow in my sky 끝에 다음 코드를 추가하여 그라데이션 텍스트를 만듭니다. (그라디언트를 생성하는 두 가지 색상: #c597ff 및 #73e7a9)

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

var ColorA = "#c597ff";
var ColorB = "#73e7a9";

// 색상 #FF00FF 형식을 Array(255,0,255)로 변환
function color2rgb(color)
{
var r =parseInt(color.substr(1, 2), 16);
var g =parseInt(color.substr(3, 2), 16);
var b =parseInt(color.substr(5, 2), 16);
return new Array(r, g, b);
}

//색상 배열(255,0,255) 형식은 #FF00FF
function rgb2color(rgb)
{
var s = "#";
for (var i = 0)로 변환됩니다. ; i < 3; i )
{
var c = Math.round(rgb[i]).toString(16);
if (c.length == 1)
c = '0 ' c;
s = c;
}
return s.toUpperCase();
}

//그라디언트 생성
functiongradient()
{
var str = myText.innerText;
var result = "";
var Step = str.length - 1;

var Gradient = new Array(3);
var A = color2rgb(ColorA);
var B = color2rgb(ColorB);

for (var N = 0; N <= Step; N )
{
for (var c = 0; c < 3; c ) // RGB 채널은 별도로 계산됩니다.
{
그라데이션[c] = A[c] (B[c]-A[c]) / Step * N;
}
result = "" str.charAt(N) "";
}
myText.innerHTML = 결과;
}

gradient(); // 프로그램 실행

세 가지 이상의 색상 A, B, C의 그라디언트의 경우 이론적으로는 A와 B를 먼저 그라디언트한 다음 B와 C를 그라디언트하는 식으로 진행하면 됩니다. 실제로 그라디언트의 각 픽셀의 색상 분포를 균일하게 만들기 위해 다양한 보간 알고리즘이 생성되었습니다. 구체적인 알고리즘은 나중에 설명합니다.