`
lynnlysh
  • 浏览: 176292 次
  • 性别: 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实现颜色渐变的方法

    本文主要讲述两种颜色RGB数值的渐变算法。 已知:A=50,B=200,A、B之间平均分成3份(Step=3),求每份的数值(StepN)分别是多少。 公式:Gradient = A + (B-A) / Step * N 注]编程时为了提高效率避免浮点运算,...

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

    下面就是博主的一些思路和解决办法,如果对此没兴趣,想直接使用jquery插件的同学,...将6位颜色代码转换为10进制根据步长计算每一步增加或减少数值使用定时器执行这个增加或减少的过程1、将6位颜色代码转换为10进制

    程序天下:JavaScript实例自学手册

    1.21 用JavaScript随机修改页面的标题 1.22 判断网页加载完毕 1.23 嵌入网页的播放器 1.24 设置指定网页为主页 1.25 使用JavaScript传递页面参数 1.26 页面被冻结 第 2章 按钮特效 2.1 页面刷新按钮 2.2 按回车调用...

    《程序天下:JavaScript实例自学手册》光盘源码

    1.21 用JavaScript随机修改页面的标题 1.22 判断网页加载完毕 1.23 嵌入网页的播放器 1.24 设置指定网页为主页 1.25 使用JavaScript传递页面参数 1.26 页面被冻结 第 2章 按钮特效 2.1 页面刷新按钮 2.2 按回车调用...

    纯js和css实现渐变色包括静态渐变和动态渐变

    说起“渐变色”,你会想起什么? 当我开始搜索查找这个名词的时候,才... 这样我们先来用javascript实现一下所谓的动态渐变,考虑动态原因就不上图了,我来简单介绍下思路: * 动态渐变 代码如下: <span style=”fo

    《精通Javascript+jQuery》光盘源码

    第1部分 JavaScript.cCSS与DOM基础篇   第1章 ccJavaScript概述 ... 4.6.1 颜色渐变的文字  4.6.2 鼠标文字跟随  …… 第 2部分 JavaScript.cCSS.cDOM高级篇 第3部分 jQuery框架篇 第4部分 综合案例篇

    JavaScript网页特效范例宝典源码

    实例143 制作彩色渐变文字动画 224 5.2 改变文字大小 226 实例144 文字伸缩 226 实例145 动荡的文字 227 实例146 文字伸展 228 实例147 文字逐个放大 230 实例148 自动改变大小 231 实例149 选择字体的大小 232 5.3 ...

    JavaScript-Mandelbrot-Set:一个使用javascript渲染Mandelbrot集的程序

    JavaScript-Mandelbrot-集 一个使用JavaScript渲染Mandelbrot集的程序。 这是我制作的快速程序,仅使用JavaScript和HTML... 为此,我建立了3个颜色转换步骤,换句话说,就是非常基本的颜色渐变。 最多50次迭代。 有趣

    javascript网页特效实例大全

    12.5 使用javascript访问数据库 330 12.6 小结 331 第13章 综合实例 333 13.1 勇闯迷宫 334 13.2 记忆力游戏 338 13.3 贪吃蛇游戏 342 13.4 打蜜蜂 345 13.5 射击游戏 350 13.6 螃蟹赛跑 353 13.7 数字拼图...

    colorgrad:这显示颜色渐变

    色阶这显示颜色渐变。 只需打开colorgrad.html,并指定源色目标颜色,以及要显示的颜色数量,然后按“提交”以显示颜色列表。 这都是用 HTML 和 JavaScript 编写的,因此不需要 Web 服务器。 但是,它应该在连接到...

    精通JavaScript+jQuery Part1

    目录 第1部分 CSS基础知识篇  第1章 CSS的初步体验  ... 4.6.1 颜色渐变的文字  4.6.2 鼠标文字跟随  …… 第2部分 JavaScript.cCSS.cDOM高级篇 第3部分 jQuery框架篇 第4部分 综合案例篇

    JavaScript实用范例词典04-14

    6.26 产生渐变颜色的文字效果... 177 6.27 逐字变化文字颜色... 178 6.28 文字从左边移动到右边... 180 6.29 文字来回反弹... 181 6.30 升降文字... 182 6.31 反弹文字... 184 6.32 逐字显示文字... 186 6.33...

    Small_projects:不应包含自己的历史记录的小型项目将被包含在其中

    这是使用两个颜色输入的基本线性渐变生成器。 这会从第一种颜色和第二种颜色创建一个渐变。 它还具有选择完全随机旋转和颜色以创建新渐变的功能。 控制台中先前生成的渐变以及十六进制代码和旋转度。 该项目是使用...

    examples:AssemblyScript示例的集合

    ()逐行计算内存中颜色渐变的2048个偏移量,并使用渐变的实际颜色(在JavaScript端在画布上计算出)来显示该集合。 () Colin Eberhardt和Ben Smith的WebAssembly干涉效果,如果它是用AssemblyScript编写的。 ...

    LED-Playground:通过互联网控制 WS2812 LED,具有不同的动画

    足够的地方可以更好地使用内存,更快的动画计算 使 API 更智能(例如,将所有动画记录到数据库以获取“最常用的动画设置”或通过不同令牌为每个调用者提供的统计信息) 更多动画: 莫尔斯电码,输入文本并显示带...

Global site tag (gtag.js) - Google Analytics