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 相关文章推荐
javascript 静态对象和构造函数的使用和公私问题
Mar 02 Javascript
js+css在交互上的应用
Jul 18 Javascript
jQuery事件绑定和委托实例
Nov 25 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
Oct 09 Javascript
js实现跨域的多种方法
Dec 25 Javascript
Node调用Java的示例代码
Sep 20 Javascript
AngularJS监听ng-repeat渲染完成的方法
Mar 20 Javascript
checkbox在vue中的用法小结
Nov 13 Javascript
Vue实现的父组件向子组件传值功能示例
Jan 19 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
Sep 06 Javascript
在Vue 中获取下拉框的文本及选项值操作
Aug 13 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
Oct 16 Javascript
利用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
destoon安全设置中需要设置可写权限的目录及文件
2014/06/21 PHP
phpQuery让php处理html代码像jQuery一样方便
2015/01/06 PHP
php正则表达式学习笔记
2015/11/13 PHP
PHP函数shuffle()取数组若干个随机元素的方法分析
2016/04/02 PHP
通过JAVAScript实现页面自适应
2007/01/19 Javascript
javascript里的条件判断
2007/02/27 Javascript
基于jquery用于查询操作的实现代码
2010/05/10 Javascript
js操作textarea 常用方法总结
2012/12/03 Javascript
js去除重复字符串两种实现方法
2013/01/09 Javascript
浅析LigerUi开发中谨慎载入common.css文件
2013/07/09 Javascript
JavaScript事件委托的技术原理探讨示例
2014/04/17 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
2015/08/21 Javascript
AngularJS基础 ng-dblclick 指令用法
2016/08/01 Javascript
AngularJS中$apply方法和$watch方法用法总结
2016/12/13 Javascript
React利用插件和不用插件实现双向绑定的方法详解
2017/07/03 Javascript
Angular实现表单验证功能
2017/11/13 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
2019/01/27 Javascript
layui表格 返回的数据状态异常的解决方法
2019/09/10 Javascript
[01:02:03]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS VG
2014/05/26 DOTA
[03:05]《我与DAC》之xiao8:DAC与BG
2018/03/27 DOTA
[06:48]DOTA2-DPC中国联赛2月26日Recap集锦
2021/03/11 DOTA
Python中的choice()方法使用详解
2015/05/15 Python
python实现用户登陆邮件通知的方法
2015/07/09 Python
Python中装饰器兼容加括号和不加括号的写法详解
2017/07/05 Python
python 给DataFrame增加index行名和columns列名的实现方法
2018/06/08 Python
Python正则表达式指南 推荐
2018/10/09 Python
OpenCV图像颜色反转算法详解
2019/05/13 Python
pandas DataFrame行或列的删除方法的实现示例
2019/08/02 Python
Python Django 简单分页的实现代码解析
2019/08/21 Python
HTML5 Canvas锯齿图代码实例
2014/04/10 HTML / CSS
丝芙兰巴西官方商城:SEPHORA巴西
2016/10/31 全球购物
ghd法国官方网站:英国最受欢迎的美发工具品牌
2019/04/18 全球购物
P D PAOLA意大利官网:西班牙著名的珠宝首饰品牌
2019/09/24 全球购物
2014年干部培训工作总结
2014/12/17 职场文书
数学考试作弊检讨书300字
2015/02/16 职场文书
安全责任协议书范本
2016/03/23 职场文书