Example of calculating gradient color in javascript

韦小宝
Release: 2018-01-15 11:38:30
Original
2278 people have browsed it

This article mainly introduces the relevant information ofjavascriptexamples of calculating gradient colors. I hope that this article can help everyone learn JavaScript better, so that everyone can understand and master this part of the content and be interested in JavaScript. Friends can refer to this article

Instance of javascript calculating gradient color

Sometimes, atableor an area needs several Colors of the same color series from light to dark, as shown in the picture:

If less colors are needed, the color difference is larger, and more colors are needed. Then the color difference is 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; }
Copy after login

The above is all the content of this article. I hope everyone is interested in this article! !

Related recommendations:

Javascript uses rem for responsive development example sharing

How to implement Javascript webpage red envelope grabbing plug-in

Javascript converts the absolute path of the image to base64 encoding

The above is the detailed content of Example of calculating gradient color in javascript. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!