javascript计算渐变颜色的实例


Posted in Javascript onSeptember 22, 2017

javascript计算渐变颜色的实例

有时候,一个表格或者一片区域内,需要若干同色系从浅到深的颜色,如图所示:  

javascript计算渐变颜色的实例

如果需要的颜色少,则颜色的差异较大,需要的颜色多,则颜色差异小,如下图:

 javascript计算渐变颜色的实例

javascript计算渐变颜色的实例

这时,就用到了同色系渐变颜色的计算,算法如下:

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; 
}

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
Prototype使用指南之selector.js说明
Oct 26 Javascript
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
Feb 07 Javascript
jQuery 处理表单元素的代码
Feb 15 Javascript
Json对象替换字符串占位符实现代码
Nov 17 Javascript
jQuery的3种请求方式$.post,$.get,$.getJSON
Mar 28 Javascript
jQuery基础语法实例入门
Dec 23 Javascript
javascript正则表达式定义(语法)总结
Jan 08 Javascript
浅谈JavaScript for循环 闭包
Jun 22 Javascript
详解如何较好的使用js
Dec 16 Javascript
jQuery实现6位数字密码输入框
Dec 29 Javascript
详解Vue监听数据变化原理
Mar 08 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
利用Node.js了解与测量HTTP所花费的时间详解
Sep 22 #Javascript
原生JS实现日历组件的示例代码
Sep 22 #Javascript
BootstrapTable加载按钮功能实例代码详解
Sep 22 #Javascript
Bootstrap Table 删除和批量删除
Sep 22 #Javascript
jQury Ajax使用Token验证身份实例代码
Sep 22 #Javascript
Angular将填入表单的数据渲染到表格的方法
Sep 22 #Javascript
详解在express站点中使用ejs模板引擎
Sep 21 #Javascript
You might like
用PHP动态创建Flash动画
2006/10/09 PHP
PHP date函数常用时间处理方法
2015/05/11 PHP
php写app接口并返回json数据的实例(分享)
2017/05/20 PHP
浅谈php的TS和NTS的区别
2019/03/13 PHP
Prototype Class对象学习
2009/07/19 Javascript
jquery 常用操作整理 基础入门篇
2009/10/14 Javascript
JavaScript 拾碎[三] 使用className属性
2010/10/16 Javascript
$.ajax返回的JSON无法执行success的解决方法
2011/09/09 Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
2012/10/11 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
2015/03/03 Javascript
Javascript闭包与函数柯里化浅析
2016/06/22 Javascript
nodejs中全局变量的实例解析
2017/03/07 NodeJs
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
2017/06/14 Javascript
electron中使用bootstrap的示例代码
2018/11/06 Javascript
VUE路由动态加载实例代码讲解
2019/08/26 Javascript
JavaScript如何使用插值实现图像渐变
2020/06/28 Javascript
[04:29]2014DOTA2国际邀请赛 主赛事第三日TOPPLAY
2014/07/21 DOTA
一篇文章快速了解Python的GIL
2018/01/12 Python
Python3中列表list合并的四种方法
2019/04/19 Python
python3.6根据m3u8下载mp4视频
2019/06/17 Python
Python3批量移动指定文件到指定文件夹方法示例
2019/09/02 Python
如何将你的应用迁移到Python3的三个步骤
2019/12/22 Python
Python3 Click模块的使用方法详解
2020/02/12 Python
Python爬虫爬取、解析数据操作示例
2020/03/27 Python
使用openCV去除文字中乱入的线条实例
2020/06/02 Python
python语言是免费还是收费的?
2020/06/15 Python
pandas数据处理之绘图的实现
2020/06/15 Python
keras.layer.input()用法说明
2020/06/16 Python
《埃及的金字塔》教学反思
2014/04/07 职场文书
《悯农》教学反思
2014/04/28 职场文书
保护环境倡议书100字
2014/05/19 职场文书
查摆问题整改措施
2014/10/24 职场文书
儿子满月酒致辞
2015/07/29 职场文书
大学班干部竞选稿
2015/11/20 职场文书
会议开幕致辞怎么写
2016/03/03 职场文书
Redis keys命令的具体使用
2022/06/05 Redis