当前位置: 首页 > 编程笔记 >

javascript计算渐变颜色的实例

臧兴学
2023-03-14
本文向大家介绍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; 
} 

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

 类似资料:
  • 主要内容:JavaFX渐变颜色,线性梯度(LinearGradient),径向渐变,半透明渐变,反射循环渐变JavaFX渐变颜色 可以使用径向渐变使形状看起来三维(立体)。 梯度绘制可以在两种或更多种颜色之间内插,这给出形状的深度。JavaFX提供两种类型的渐变:径向渐变()和线性渐变()。 要在JavaFX中创建渐变颜色,需要设置五个属性值。如下 - 设置开始起点的第一个停止颜色。 将终点设置为终止停止颜色。 设置属性以指定是使用标准屏幕坐标还是单位平方坐标。 将循环方法设置为使用三个枚举:,

  • 问题内容: 是否有生成器,或生成这种文本的简便方法,而无需定义 每个 字母 所以像这样: 但是不是用 彩虹 色而是用其他颜色(例如,白色到灰色/浅蓝色渐变等)生成的,我为此找不到简单的解决方案。有什么办法吗? 问题答案: 我不完全了解 Stop的 工作原理。但是我有一个 渐变文本 示例。也许这会帮到您! _您也可以根据需要为渐变添加更多颜色,或者从颜色生成器中选择其他颜色

  • 本文向大家介绍Unity3D实现渐变颜色效果,包括了Unity3D实现渐变颜色效果的使用技巧和注意事项,需要的朋友参考一下 基于unity3D实现渐变颜色的简单脚本,代码很少,就不废话了,直接上代码和效果图。 效果图: 虽然支持的内容不多,但是小而精,希望对大家有用。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 问题内容: 我知道Internet Explorer具有一些专有扩展,因此您可以执行诸如创建具有渐变背景的div之类的操作。我不记得元素名称或其用法。有没有人有一些例子或链接? 问题答案: 我用于所有浏览器渐变的代码: 您需要指定一个高度或zoom: 1将其应用于hasLayoutIE中的元素。 更新: 这是面向所有LESS用户的LESS Mixin(CSS)版本:

  • 本文向大家介绍js实现颜色阶梯渐变效果(Gradient算法),包括了js实现颜色阶梯渐变效果(Gradient算法)的使用技巧和注意事项,需要的朋友参考一下 html中颜色可以使用rgb和hex方式来表示。 在色彩中,色相、明度、纯度也都可以产生渐变效果,并会表现出具有丰富层次的美感。本文主要讲述两种颜色RGB数值的梯级渐变算法。 其中如如16进制颜色如#336600分别表示rgb模式中r的值为

  • 本文向大家介绍JavaScript实现的鼠标响应颜色渐变效果完整实例,包括了JavaScript实现的鼠标响应颜色渐变效果完整实例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JavaScript实现的鼠标响应颜色渐变效果。分享给大家供大家参考,具体如下: 运行效果图如下: 完整代码如下: PS:这里再为大家推荐几款网页元素样式相关工具供大家参考使用: 在线特效文字/彩色文字生成工具:

  • 问题内容: 我在React Native应用程序中使用React Navigation,我想将标头更改为渐变,我发现这里有一个节点模块:在react native中实现渐变。 我有这样的Root StackNavigator : 我可以像这样包装或渐变: 如何将标题背景包装在中以使用该模块? 我知道我可以创建一个自定义标头组件并使用它,但是当我这样做时,React Navigation的所有本机导

  • 本文向大家介绍jQuery与js实现颜色渐变的方法,包括了jQuery与js实现颜色渐变的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery与js实现颜色渐变的方法。分享给大家供大家参考,具体如下: 1.目的 本来想的是 提示用户应该点某个按钮 这个功能,就想着让这个按钮div的边框变成醒目的颜色然后逐渐变白。 在网上搜了搜,本来想使用jQuery的animate,后来发现这