脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript实现颜色渐变

javascript实现颜色渐变的方法

 更新时间：2013年10月30日 16:26:39   作者：  
这篇文章介绍了javascript实现颜色渐变的方法，有需要的朋友可以参考一下

渐变(Gradient)是美学中一条重要的形式美法则，与其相对应的是突变。形状、大小、位置、方向、色彩等视觉因素都可以进行渐变。在色彩中，色相、明度、纯度也都可以产生渐变效果，并会表现出具有丰富层次的美感。本文主要讲述两种颜色RGB数值的渐变算法。

已知：A=50，B=200，A、B之间平均分成3份（Step=3），求每份的数值（StepN）分别是多少。

公式：Gradient = A + (B-A) / Step * N

注]编程时为了提高效率避免浮点运算，往往把除法放在最后面，这样公式就成了：Gradient = A + (B-A) * N / Step

Step=3时，根据公式可以求出Step1=A+(A-B)/3*1=50+(200-50)/3=100，Step2=A+(A-B)/3*2=50+(200-50)/3*2=150。这就是均匀渐变的算法原理了，很简单，小学知识。

两种颜色的渐变就是对两种颜色的RGB通道分别进行这样的计算，例如两种颜色分别是RGB(200,50,0)和RGB(50,200,0)，用上述公式进行计算就是：

RStep1=RA=RA+(BA-RA)/Step*N=200+(50-200)/3*1=200-50=150

GStep1=GA=GA+(GA-GA)/Step*N=50+(200-50)/3*1=50+50=100

BStep1=BA=BA+(BA-BA)/Step*N=0

因此RGBStep1=(150,100,0)，同样的方法可以求出RGBStep2=(100,150,0)。

网页中的渐变文字特效就是这么做出来的。例如你的网页HTML中有这么一句代码：<span id=myText>你就是我天空里最美丽的彩虹</span>，在后面加入如下的代码就可以实现渐变文字。（生成渐变的两种颜色：#c597ff和#73e7a9）

复制代码 代码如下:

var ColorA = "#c597ff";
var ColorB = "#73e7a9";

// 颜色#FF00FF格式转为Array(255,0,255)
function color2rgb(color)
{
 var r = parseInt(color.substr(1, 2), 16);
 var g = parseInt(color.substr(3, 2), 16);
 var b = parseInt(color.substr(5, 2), 16);
 return new Array(r, g, b);
}

// 颜色Array(255,0,255)格式转为#FF00FF
function rgb2color(rgb)
{
 var s = "#";
 for (var i = 0; i < 3; i++)
 {
  var c = Math.round(rgb[i]).toString(16);
  if (c.length == 1)
   c = '0' + c;
  s += c;
 }
 return s.toUpperCase();
}

// 生成渐变
function gradient()
{
 var str = myText.innerText;
 var result = "";
 var Step = str.length - 1;

 var Gradient = new Array(3);
 var A = color2rgb(ColorA);
 var B = color2rgb(ColorB);

 for (var N = 0; N <= Step; N++)
 {
  for (var c = 0; c < 3; c++) // RGB通道分别进行计算
  {
   Gradient[c] = A[c] + (B[c]-A[c]) / Step * N;
  }
  result += "<font color=" + rgb2color(Gradient) +
   ">" + str.charAt(N) + "</font>";
 }
 myText.innerHTML = result;
}

gradient(); // 运行程序

A、B、C三种颜色或多种颜色的渐变，理论上讲只要先把A、B进行渐变，再把B、C进行渐变，依此类推就行了。实践过程中，为了使渐变的每个像素颜色分布均匀，产生了多种插值算法，具体算法以后再讨论吧。

您可能感兴趣的文章:

相关文章

  • js里取容器大小、定位、距离等属性搜集整理

    js里取容器大小、定位、距离等属性搜集整理

    取容器大小、定位、距离等在实际中使用的比较广泛，下面与大家分享下小编整理的js相关代码，有此需求的朋友可以参考下，希望对大家有所帮助
    2013-08-08
  • JS实现转动随机数抽奖特效代码

    JS实现转动随机数抽奖特效代码

    这篇文章主要为大家详细介绍了一款转动随机数抽奖的JS特效代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2015-08-08
  • javascript遍历json对象的key和任意js对象属性实例

    javascript遍历json对象的key和任意js对象属性实例

    下面小编就为大家带来一篇javascript遍历json对象的key和任意js对象属性实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • JS将数字转换成三位逗号分隔的样式(示例代码)

    JS将数字转换成三位逗号分隔的样式(示例代码)

    本篇文章主要是对JS将数字转换成三位逗号分隔的样式(示例代码)进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-02-02
  • 详解Require.js与Sea.js的区别

    详解Require.js与Sea.js的区别

    RequireJS 和 Sea.js 都是模块加载器，倡导模块化开发理念，核心价值是让 JavaScript 的模块化开发变得简单自然。这篇文章给大家简单介绍了Require.js与Sea.js的区别，感兴趣的朋友一起看看吧
    2018-08-08
  • js简单倒计时实现代码

    js简单倒计时实现代码

    这篇文章主要介绍了js简单倒计时实现代码,涉及JavaScript时间与日期的相关运算技巧,需要的朋友可以参考下
    2016-04-04
  • js数组Array sort方法使用深入分析

    js数组Array sort方法使用深入分析

    js中Array.sort()方法是用来对数组项进行排序的,默认是升序排列sort() 方法可以接受一个 方法为参数，这个方法有两个参数，接下来本例将对sort方法进行深入探讨，感兴趣的朋友可以参考下
    2013-02-02
  • 总结分享10个JavaScript代码优化小tips

    总结分享10个JavaScript代码优化小tips

    这篇文章主要介绍了总结分享10个JavaScript代码优化小tips，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
    2022-07-07
  • js使用cookie记录用户名的方法

    js使用cookie记录用户名的方法

    这篇文章主要介绍了js使用cookie记录用户名的方法,通过完整实例形式分析了JavaScript针对cookie的创建、赋值及删除等操作技巧,以及通过cookie记录用户登录信息的方法,需要的朋友可以参考下
    2015-11-11
  • JS动态显示倒计时效果

    JS动态显示倒计时效果

    这篇文章主要介绍了JS实现倒计时效果动态显示倒计时功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-12

最新评论