Javascript implements the method of color gradient

Gradient is an important rule of formal beauty in aesthetics, which corresponds to mutation. Shape, size, position, direction, color and other visual factors can be changed gradually. In colour, hue, lightness, purity also can produce gradual change effect, can show the aesthetic feeling that has rich level. This paper mainly describes two kinds of color RGB numerical gradient algorithm.

Given: A=50, B=200, and divide A and B into 3 equal parts (Step=3), find the value of each part (StepN).

Formula: Gradient = A + (B-A)/Step * N

Note: in order to improve efficiency and avoid floating point operation, division is often placed at the end of the program, so the formula is: Gradient = A + (B-A) * N/Step

Step = 3, according to the formula to calculate Step1 = A + (A - B) / 3 * 1 = 50 + (200-50) / 3 = 100, Step2 = A + (A - B) / 3 * 2 = 50 + (200-50) / 3 * 2 = 150. So that's the algorithm for uniform gradient, very simple, elementary school.

The gradient of two colors is to calculate the RGB channel of two colors respectively. For example, the two colors are RGB(200,50,0) and RGB(50,200,0) respectively.

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

Therefore, RGBStep1=(150,100,0), the same method can be found RGBStep2=(100,150,0).

This is how the gradient text effect is created in the web page. For example, your HTML page has this code: < Span id = myText> You are the most beautiful rainbow in my sky. / span> To implement the gradient text, add the following code. (two colors to generate gradients: #c597ff and #73e7a9)

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 changed 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 the 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 channels are 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(); //To run the program

A, B, C three or more color gradient, in theory, as long as A, B gradient, then B, C gradient, and so on. In practice, in order to evenly distribute the color of each pixel in the gradient, a variety of interpolation algorithms are produced. The specific algorithms will be discussed later.