`
lynnlysh
  • 浏览: 178884 次
  • 性别: Icon_minigender_2
  • 来自: 天津
社区版块
存档分类
最新评论

如何用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;
}

改进版:
/**
* color1,color2 数组 ,行如[233,239,239] 分别为红 绿 蓝,对应rgb(73,238,343) 中的*三个颜色
*colorLevel 要返回的颜色个数
**/
function getItemColors (color1,color2,colorLevel) {  
    var colors= [];  
    //默认的最深颜色
    var red = color1[0],green = color1[1], blue = color1[2];  
    //最浅颜色是239,239,239 比如:最浅颜色的red是 239 则差值为239-134=105
    var maxRed = color2[0],maxGreen = color2[1],maxBlue = color2[2];  
    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;  
} 

*&**&**&**&**&**&**&**&**&**&*喜庆的分割线*&**&**&**&**&**&**&**&**&**&**&**&*
马上就要结婚了,开心
  • 大小: 5.8 KB
  • 大小: 2.7 KB
  • 大小: 3 KB
0
0
分享到:
评论

相关推荐

    javascript计算渐变颜色的实例

    在前端开发中,使用JavaScript来计算渐变颜色是非常实用的技能。 本文将详细探讨JavaScript如何计算渐变颜色,并提供具体的实例代码。我们将通过一个函数 `getItemColors` 来实现,它可以根据指定的颜色级别来生成...

    javascript实现颜色渐变的方法

    在本文中,我们将探讨如何使用JavaScript来实现颜色的渐变效果,这是一个常见的视觉设计技巧,常用于网页背景、按钮、文字等多种元素。 颜色渐变通常涉及到RGB色彩模式,即红色(Red)、绿色(Green)和蓝色(Blue...

    窗体颜色渐变

    4. **脚本语言实现**:对于脚本语言,如JavaScript,可以利用canvas元素的绘图功能来实现颜色渐变,或者使用CSS3的动态修改能力,通过JavaScript控制颜色渐变动画。 在实现颜色渐变时,需要注意以下几点: 1. **...

    计算机软件-商业源码-渐变颜色的界面.zip

    使用这些源码,开发者可以学习如何在软件界面中应用渐变颜色,同时也可以直接将其整合到自己的项目中,以提升软件的视觉效果。对于初学者,这是一个很好的学习资源,了解如何通过编程技术实现界面美化。对于有经验的...

    javascript经典特效---打开页面颜色渐变.rar

    通过这个例子,你可以了解到如何使用JavaScript来操控网页元素的样式,以及如何实现颜色渐变效果。这个过程涉及到了颜色理论、JavaScript的DOM操作和时间函数。你可以根据需求调整颜色、渐变时间和颜色步进,以实现...

    Javascript 颜色渐变效果的实现代码

    3. 设定一个总的执行次数,用以决定颜色渐变的步长; 4. 利用定时器按步长逐步更新颜色值; 5. 在颜色变化的最后一次将颜色直接调整到目标值。 需要注意的是,在代码实现时,我们通常需要考虑浏览器的兼容性以及...

    颜色渐变直线

    例如,在Python的PIL库或JavaScript的Canvas API中都有相关的函数和方法来绘制颜色渐变。在3D图形中,颜色渐变直线的概念被扩展到了3D空间,用于表面着色和纹理映射。 总之,颜色渐变直线是计算机图形学中的基本...

    有意思的Js可拖动的渐变色角度选择器 Javascript模拟出的角度选择器,拖动这个简洁的滑块,会改变渐变色的角度,本代码有两个亮点:一个是滑块的拖动,别一个则是渐变色的实现,这两者的结合必然形成独特的代码

    该元素允许定义线性或径向渐变,并且可以指定颜色、透明度等属性。通过改变渐变的角度,即可实现动态的渐变效果。 #### 代码分析 1. **页面结构与样式**: - HTML 结构相对简单,包含了三个主要的 VML 元素:`...

    提取图片颜色生成背景渐变js代码

    在JavaScript的世界里,实现"提取图片颜色生成背景渐变"的功能是一种常见的图像处理技术,尤其在网页设计中,可以创建出独特的视觉效果。这个功能的核心在于解析图片的颜色信息,并利用这些信息来生成背景的渐变色。...

    提取图片颜色生成背景渐变js代码.zip

    在JavaScript的世界里,创建动态和引人入胜的网页效果是一项常见的挑战,而"提取图片颜色生成背景渐变js代码.zip"就是一个解决此类问题的工具。这个压缩包包含了一个JavaScript代码示例,它能帮助开发者从一张图片中...

    Javascript颜色梯度

    因此,在使用JavaScript实现颜色梯度时,应考虑优化代码,避免不必要的计算,并适时利用CSS3的能力。 7. **跨浏览器兼容性** 考虑到不同浏览器对CSS3和JavaScript的支持程度,开发时需确保渐变效果在主要浏览器上...

    JavaScript 亮丽的JS图片渐变导航.rar

    为了实现更复杂的渐变效果,如颜色渐变,可以利用CSS3的`linear-gradient`,但这种方法在JavaScript中实现可能会相对复杂,因为需要计算和设置多个颜色停止点。不过,可以通过创建和修改背景图像或者使用滤镜(如`...

    JavaScript实现渐变色效果(不使用图片)

    需要注意的是,这种方法虽然不依赖外部图片,但是其性能开销要比直接使用CSS渐变效果大,因为需要通过JavaScript计算每一步的颜色,并且将其应用到具体的DOM元素上。另外,由于渐变效果是通过程序计算出来的,所以...

    cesium 多边形渐变颜色 canvas方式+图片方式

    通过以上方法,您可以在Cesium中创建具有渐变颜色效果的多边形,无论是通过Canvas动态绘制还是使用预设的渐变图片。这两种方式各有优缺点,Canvas方式更加灵活,但可能消耗更多计算资源;而图片方式则易于实现,但...

    JavaScript 渐变链接提示tooltip封装类

    7. **可配置性**:一个优秀的封装类应该允许开发者自定义一些参数,比如渐变颜色、提示框的样式、显示延迟时间等。这可以通过构造函数接收配置对象,或者提供相应的设置方法来实现。 8. **模块化**:为了适应现代...

    chromajs适用于各种颜色操作的很小JavaScript库

    `chroma.js`是一个小巧但功能强大的JavaScript库,专为颜色操作而设计。它提供了一套简洁的API,使得在JavaScript中处理颜色变得简单且直观。这个库尤其适合那些需要在网页或应用中进行颜色转换、调整、分析以及可视...

    自定义颜色渐变的仪表盘

    在IT行业中,创建一个自定义颜色渐变的仪表盘是一项常见的任务,特别是在数据可视化和UI设计领域。这种仪表盘能够以动态、直观的方式展示数据,为用户提供清晰的指标读取体验。下面我们将深入探讨如何实现这样的功能...

    color__fading.rar_color__fading_颜色渐变

    或者使用JavaScript动态计算和设置元素的样式,根据进度调整渐变位置。 总的来说,颜色渐变是软件开发中的一个重要技巧,它不仅可以提升用户体验,还能增加视觉吸引力。通过学习和理解这个压缩包中的源代码,开发者...

Global site tag (gtag.js) - Google Analytics