Javascript calculation gradient color example sharing

This article mainly introduces relevant information to you about the examples of javascript calculating gradient color. I hope this article can help you understand and master this part of the content. Friends who need it can refer to it. I hope it can help you.

Instance of javascript calculating gradient color

Sometimes, within a table or an area, several colors of the same color system from light to dark are needed, as shown in the figure As shown:

If few colors are needed, the color difference will be large; if more colors are needed, the color difference will be small, as shown below:

At this time, the calculation of the gradient color of the same color system is used. The algorithm is as follows:

function getItemColors (colorLevel) { 
  var colors= []; 
  //默认的最深颜色 
  var red = 134,green = 108, blue = 184; 
  //最浅颜色是239,239,239 比如：最浅颜色的red是 239 则差值为239-134=105 
  var maxRed = 105,maxGreen = 131,maxBlue = 55; 
  var level = colorLevel; 
  while(level--) { 
    colors.push( 'rgb('+red +','+green+','+blue+')'); 
    red += parseInt(maxRed/colorLevel); 
    green += parseInt(maxGreen/colorLevel); 
    blue += parseInt(maxBlue/colorLevel); 
  } 
  return colors; 
}

Related recommendations:

html5 canvas drawing radioactive gradient color effect code example

Color value RGBA and gradient in CSS3 Detailed explanation of color (picture)

div+css background gradient color code example

The above is the detailed content of Javascript calculation gradient color example sharing. For more information, please follow other related articles on the PHP Chinese website!