JavaScript color gradient

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Gradient (Gradient) is an important form of aesthetic beauty, the corresponding mutation. Shape, size, location, direction, color and other visual elements can be graded. In color, hue, lightness, purity also can produce the gradient effect, and will show with rich layers of beauty. Gradient algorithm in this paper, two kinds of color RGB value.

Known: A=50, B=200, A, B were divided into 3 (Step=3), the numerical calculation for each of the (StepN) are the number.

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

Note: when programming in order to improve the efficiency and avoid floating-point division, often put on the back, so the formula became: Gradient = A + (B-A) * N / Step

Step=3, can be calculated according to formula Step1=A+ (A-B) /3*1=50+ (200-50) /3=100, Step2=A+ (A-B) /3*2=50+ (200-50) /3*2=150. The principle of the algorithm that is uniformly graded, is very simple, the knowledge of primary school.

Two kinds of color of the gradient is the colors of the two RGB channel separately such calculations, such as two kinds of color are RGB (200,50,0) and RGB (50200,0), calculated by the formula is:




So RGBStep1= (150100,0), the same method can be used to find RGBStep2=(100,150,0).

Webpage of Gradient Text Effect come. For example, your webpage HTML has such a code: <span id=myText> you are the most beautiful rainbow < in my sky; /span>, behind add the following code can achieve gradient text. (two colors: generation of graded #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 of Array (255,0255) format 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();

// Generation of graded
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 were calculated
   Gradient[c] = A[c] + (B[c]-A[c]) / Step * N;
  result += "<font color=" + rgb2color(Gradient) +
   ">" + str.charAt(N) + "</font>";
 myText.innerHTML = result;

gradient(); // Run the program

A,B,C three colors or more color gradient, theoretically speaking, as long as the first A, B gradient, then B, C gradient, and so on the line. In the process of practice, in order to make each pixel color gradient distribution, produced a variety of interpolation algorithm, the algorithm will be discussed later.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Posted by Jack at November 12, 2013 - 3:30 PM