How JavaScript implements a color gradient _javascript tips

Gradient (gradient) is an important form of beauty law in aesthetics, which corresponds to mutation. Shape, size, position, direction, color and other visual factors can be gradient. In color, hue, lightness, purity can also produce a gradual effect, and will show a rich level of beauty. This paper mainly describes two kinds of color RGB numerical gradient algorithm.

Known: A=50,b=200,a, B between the average divided into 3 (step=3), for each value (STEPN) is how much.

Formula: Gradient = A + (b-a)/step * N

Note] In order to improve efficiency and avoid floating-point operations in programming, it is often necessary to put division on the last side so that the formula becomes: 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 can be obtained according to the formula. This is the uniform gradient algorithm principle, very simple, elementary school knowledge.

The two colors of the gradient is the two colors of the RGB channel for such calculations, such as the two colors are RGB (200,50,0) and RGB (50,200,0), calculated using the formula above is:

rstep1=ra=ra+ (Ba-ra)/step*n=200+ (50-200)/3*1=200-50=150

gstep1=ga=ga+ (GA-GA)/step*n=50+ (200-50)/3*1=50+50=100

bstep1=ba=ba+ (BA-BA)/step*n=0

So rgbstep1= (150,100,0), the same method can be used to find rgbstep2= (100,150,0).

Gradient text in a Web page this is how the effect is done. For example, there is a code in HTML for your Web page: <span id=mytext> You are the most beautiful rainbow in my Sky </span>, you can implement the gradient text by adding the following code later. (two colors to generate a gradient: #c597ff和 #73e7a9)

Copy Code code as follows:

var Colora = "#c597ff";
var colorb = "#73e7a9";

Color #ff00ff format to 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);
}

The color array (255,0,255) format is converted to #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 ();
}

To generate a gradient
function gradient ()
{
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 channel calculated separately
{
GRADIENT[C] = A[c] + (B[c]-a[c])/step * N;
}
result = = "<font color=" + rgb2color (gradient) +
">" + Str.charat (N) + "</font>";
}
mytext.innerhtml = result;
}

Gradient (); Running programs

A, B, c three colors or a variety of colors of the gradient, in theory, as long as the first A, b gradient, and then B, c to the gradient, and so on the line. In practice, many interpolation algorithms are produced in order to make the color distribution of each pixel of the gradient uniform, and the specific algorithm is discussed later.