javascript实现颜色渐变

2023-08-14 11:23:10

渐变(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)，用上述公式进行计算就是：

R_Step1=R_A=R_A+(B_A-R_A)/Step*N=200+(50-200)/3*1=200-50=150

G_Step1=G_A=G_A+(G_A-G_A)/Step*N=50+(200-50)/3*1=50+50=100

B_Step1=B_A=B_A+(B_A-B_A)/Step*N=0

因此RGB_Step1=(150,100,0)，同样的方法可以求出RGB_Step2=(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进行渐变，依此类推就行了。实践过程中，为了使渐变的每个像素颜色分布均匀，产生了多种插值算法，具体算法以后再讨论吧。

码农公寓

相关文章