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 相关文章推荐
jQuery1.5.1 animate方法源码阅读
Apr 05 Javascript
jquery中ajax学习笔记一
Oct 16 Javascript
对JavaScript客户端应用编程的一些建议
Jun 24 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
Dec 16 Javascript
javascript获取select标签选中的值
Jun 04 Javascript
JavaScript中数组Array方法详解
Feb 27 Javascript
vue2.0父子组件间通信的实现方法
Apr 19 Javascript
JavaScript 用fetch 实现异步下载文件功能
Jul 21 Javascript
vue使用axios实现文件上传进度的实时更新详解
Dec 20 Javascript
动态内存分配导致影响Javascript性能的问题
Dec 18 Javascript
深入分析JavaScript 事件循环(Event Loop)
Jun 19 Javascript
移动端JS实现拖拽两种方法解析
Oct 12 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
PHP迭代器的内部执行过程详解
2013/11/12 PHP
php获取网页上所有链接的方法
2015/04/03 PHP
thinkphp3.2实现上传图片的控制器方法
2016/04/28 PHP
thinkPHP自动验证、自动添加及表单错误问题分析
2016/10/17 PHP
centos+php+coreseek+sphinx+mysql之一coreseek安装篇
2016/10/25 PHP
jQuery1.6 使用方法二
2011/11/23 Javascript
Jquery实现的简单轮播效果【附实例】
2016/04/19 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
2016/08/01 Javascript
js改变透明度实现轮播图的算法
2020/08/24 Javascript
js面向对象编程总结
2017/02/16 Javascript
Vue源码学习之初始化模块init.js解析
2017/11/02 Javascript
微信小程序实现选项卡功能
2020/06/19 Javascript
在vue里面设置全局变量或数据的方法
2018/03/09 Javascript
Angular 容器部署的方法
2018/04/17 Javascript
解决jQuery使用append添加的元素事件无效的问题
2018/08/30 jQuery
微信小程序与公众号卡券/会员打通的问题
2019/07/25 Javascript
详解nginx配置vue h5 history去除#号
2020/11/09 Javascript
[00:17]天涯墨客一技能展示
2018/08/25 DOTA
python实现从一组颜色中找出与给定颜色最接近颜色的方法
2015/03/19 Python
python文件操作之目录遍历实例分析
2015/05/20 Python
Python中time模块和datetime模块的用法示例
2016/02/28 Python
详谈python read readline readlines的区别
2017/09/22 Python
numpy实现合并多维矩阵、list的扩展方法
2018/05/08 Python
Python使用Pickle库实现读写序列操作示例
2018/06/15 Python
基于OpenCV的路面质量检测的实现
2020/11/04 Python
Python tkinter实现日期选择器
2021/02/22 Python
财务与信息服务专业推荐信
2013/11/28 职场文书
应聘编辑自荐信范文
2014/03/12 职场文书
2014年师德承诺书
2014/05/23 职场文书
2014年保密工作总结
2014/11/22 职场文书
公司环境卫生管理制度
2015/08/05 职场文书
《花钟》教学反思
2016/02/17 职场文书
《颐和园》教学反思
2016/02/19 职场文书
python xlwt模块的使用解析
2021/04/13 Python
vue使用节流函数的踩坑实例指南
2021/05/20 Vue.js
go xorm框架的使用
2021/05/22 Golang