渐变(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进行渐变,依此类推就行了。实践过程中,为了使渐变的每个像素颜色分布均匀,产生了多种插值算法,具体算法以后再讨论吧。

javascript实现颜色渐变的更多相关文章

  1. javascript实战 : 简单的颜色渐变

    HTML <div id="color"></div> CSS .item{ display:inline-block; margin:10px; widt ...

  2. 颜色渐变的JS代码

    今天做组织机构,要分级别显示颜色,自己计算半天也没算出颜色渐变的方法,出来总是花里胡哨的难看的不要不要的,所以查了一下,找到一个js代码,试了试,很完美哦! <!DOCTYPE html> ...

  3. jQuery 小特效【文本框折叠隐藏,展开显示】【下拉菜单】【颜色渐变】【弹窗+遮罩】

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs& ...

  4. 第四界css大会 黑魔法-css网格背景、颜色拾取器、遮罩、文字颜色渐变、标题溢出渐变等

    1.css网格背景 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  5. CSS和JS两种颜色渐变文字效果代码

    js实现颜色渐变文字效果代码: <!-- js颜色渐变色文字 --> <div id="moml"> <div style="text-al ...

  6. iOS 动画绘制线条颜色渐变的折线图

    效果图 .................... 概述 现状 折线图的应用比较广泛,为了增强用户体验,很多应用中都嵌入了折线图.折线图可以更加直观的表示数据的变化.网络上有很多绘制折线图的demo,有 ...

  7. CSS3颜色渐变模式

       1.线性渐变:linear-gradient 语法:<linear-gradient> = linear-gradient([ [ <angle> | to <si ...

  8. Javascript,颜色渐变效果的处理

    在搭建博主博客的时候,寻思着做一些效果,看到菜单,就想是不是可以做一下颜色的渐变,增加一点动态的感觉.有个jquery的插件,效果相当不错,不过博主还是打算自立更生写一下,看看能不能实现. 下面就是博 ...

  9. 【iOS实现一个颜色渐变的弧形进度条】

    在Github上看到一些进度条的功能,都是通过Core Graph来实现.无所谓正确与否,但是开发效率明显就差很多了,而且运行效率还是值得考究的.其实使用苹果提供的Core Animation能够非常 ...

随机推荐

  1. bzoj3994

    智商太低了 详细题解在这里http://blog.csdn.net/zmoiynlp/article/details/45176129 ; ..max] of longint; g:..max] of ...

  2. iOS开发:iOS的整体架构以及API介绍

    iOS的整体架构分为4层——Cocoa Touch层.Media层.Core Services层和Core OS层,下面概要介绍一下这4层. Cocoa Touch:构建iOS应用的一些基本系统服务, ...

  3. 转载:Unobtrusive JavaScript in ASP.NET MVC 3 隐式的脚本在MVC3

    Unobtrusive JavaScript 是什么? <!--以下是常规Javascript下写出来的Ajax--> <div id="test"> &l ...

  4. 添加gif效果图

    1.贴加第三方包 http://blog.csdn.net/iamlazybone/article/details/5972234 2. <FrameLayout android:id=&quo ...

  5. ios9下ionic框架报[$rootScope:infdig] 10 $digest() iterations reached. Aborting!的解决办法

    升级ios9后,ionic开发的app会报[$rootScope:infdig] 10 $digest() iterations reached. Aborting!的错误,加上一个patch就可以解 ...

  6. cocos2d-x之 CCSpriteBatchNode 用法总结

    例子1: CCSpriteBatchNode* batch = [CCSpriteBatchNode batchNodeWithFile:@"table.png"];        ...

  7. 05day2

    05day1 没什么可说,一道模拟水题,两道裸的模板题.05day2 是几天以来最难的一次.   圆排列 动态规划 [问题描述] 有 N 个人顺时针围在一圆桌上开会,他们对身高很敏感. 因此决定想使得 ...

  8. 转载RabbitMQ入门(1)--介绍

    目录[-] "Hello World" (使用java客户端) 发送 接收 把所有放在一起 前面声明本文都是RabbitMQ的官方指南翻译过来的,由于本人水平有限难免有翻译不当的地 ...

  9. liunx下mysql数据库使用之三范式,关系模型设计注意项,安装目录结构

    数据库的三范式第一范式===>每行记录的属性,是原子的,拆到不可拆为止.===>例如:一个人的籍贯,可以拆分为,省,市,县,乡,村 第二范式===>每行记录的非主属性(非主键属性), ...

  10. win下Velocity安装和试用

    1.eclipse等就不说了 2.velocity的eclipse插件: http://www.oschina.net/p/veloeclipse(介绍) 方法1(现在基本上非常慢)http://pr ...