Home Web Front-end JS Tutorial js实现获取颜色渐变代码

js实现获取颜色渐变代码

Mar 02, 2018 pm 03:24 PM
javascript code Gradient

html中颜色可以使用rgb和hex方式来表示。在色彩中,色相、明度、纯度也都可以产生渐变效果,并会表现出具有丰富层次的美感。本文主要讲述两种颜色RGB数值的梯级渐变算法。

其中如如16进制颜色如#336600分别表示rgb模式中r的值为16进制33(即),g的值为16进制的66,和b为16进制的00,转换后用rgb完整表述为:rgb(51,102,0)。

其中使用16进制进行加减乘除不方便,尤其还使用了rgb的16进制颜色组合(#336600)。因此我们可以将16进制转换为rgb单个进行梯级运算在进行组合。

已知:RStart=50,REnd=200,RStart、REnd之间平均分成3份(Step=3),求每份的数值(StepN)分别是多少。

公式:Gradient = RStart+ (REnd-RStart) / Step * N (第N步的颜色rgb中R的值)

实现方法非常简单,只是需要将颜色从rgb到hex的互转。

实现代码:

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

<br>

&lt;script type=&quot;text/javascript&quot;&gt;

 /*

 // 作者 yanue

 // 参数:

 // startColor:开始颜色hex

 // endColor:结束颜色hex

 // step:几个阶级(几步)

 */

 function gradientColor(startColor,endColor,step){

  startRGB = this.colorRgb(startColor);//转换为rgb数组模式

  startR = startRGB[0];

  startG = startRGB[1];

  startB = startRGB[2];

  endRGB = this.colorRgb(endColor);

  endR = endRGB[0];

  endG = endRGB[1];

  endB = endRGB[2];

  sR = (endR-startR)/step;//总差值

  sG = (endG-startG)/step;

  sB = (endB-startB)/step;

  var colorArr = [];

  for(var i=0;i&lt;step;i++){

//计算每一步的hex值

var hex = this.colorHex(&#39;rgb(&#39;+parseInt((sR*i+startR))+&#39;,&#39;+parseInt((sG*i+startG))+&#39;,&#39;+parseInt((sB*i+startB))+&#39;)&#39;);

colorArr.push(hex);

}

return colorArr;

}

// 将hex表示方式转换为rgb表示方式(这里返回rgb数组模式)

gradientColor.prototype.colorRgb = function(sColor){

var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;

var sColor = sColor.toLowerCase();

if(sColor &amp;&amp; reg.test(sColor)){

if(sColor.length === 4){

var sColorNew = &quot;#&quot;;

for(var i=1; i&lt;4; i+=1){

sColorNew += sColor.slice(i,i+1).concat(sColor.slice(i,i+1));

}

sColor = sColorNew;

}

//处理六位的颜色值

var sColorChange = [];

for(var i=1; i&lt;7; i+=2){

sColorChange.push(parseInt(&quot;0x&quot;+sColor.slice(i,i+2)));

}

return sColorChange;

}else{

return sColor;

}

};

// 将rgb表示方式转换为hex表示方式

gradientColor.prototype.colorHex = function(rgb){

var _this = rgb;

var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;

if(/^(rgb|RGB)/.test(_this)){

var aColor = _this.replace(/(?:(|)|rgb|RGB)*/g,&quot;&quot;).split(&quot;,&quot;);

var strHex = &quot;#&quot;;

for(var i=0; i&lt;aColor.length; i++){

var hex = Number(aColor[i]).toString(16);

hex = hex&lt;10 ? 0+&#39;&#39;+hex :hex;// 保证每个rgb的值为2位

if(hex === &quot;0&quot;){

hex += hex;

}

strHex += hex;

}

if(strHex.length !== 7){

strHex = _this;

}

return strHex;

}else if(reg.test(_this)){

var aNum = _this.replace(/#/,&quot;&quot;).split(&quot;&quot;);

if(aNum.length === 6){

return _this;

}else if(aNum.length === 3){

var numHex = &quot;#&quot;;

for(var i=0; i&lt;aNum.length; i+=1){

numHex += (aNum[i]+aNum[i]);

}

return numHex;

}

}else{

return _this;

}

}

var gradient = new gradientColor(&#39;#013548&#39;,&#39;#554851&#39;,10);

console.log(gradient);//控制台输出

alert(gradient);

</script&gt;

<br>

相关推荐:      

CSS如何实现文字颜色渐变的实例

javascript实现按钮颜色渐变效果的实例讲解

JavaScript实现的鼠标响应颜色渐变效果完整实例

The above is the detailed content of js实现获取颜色渐变代码. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What to do if the blue screen code 0x0000001 occurs What to do if the blue screen code 0x0000001 occurs Feb 23, 2024 am 08:09 AM

What to do if the blue screen code 0x0000001 occurs

How to solve win7 driver code 28 How to solve win7 driver code 28 Dec 30, 2023 pm 11:55 PM

How to solve win7 driver code 28

The computer frequently blue screens and the code is different every time The computer frequently blue screens and the code is different every time Jan 06, 2024 pm 10:53 PM

The computer frequently blue screens and the code is different every time

Resolve code 0xc000007b error Resolve code 0xc000007b error Feb 18, 2024 pm 07:34 PM

Resolve code 0xc000007b error

GE universal remote codes program on any device GE universal remote codes program on any device Mar 02, 2024 pm 01:58 PM

GE universal remote codes program on any device

What does the blue screen code 0x000000d1 represent? What does the blue screen code 0x000000d1 represent? Feb 18, 2024 pm 01:35 PM

What does the blue screen code 0x000000d1 represent?

Detailed explanation of the causes and solutions of 0x0000007f blue screen code Detailed explanation of the causes and solutions of 0x0000007f blue screen code Dec 25, 2023 pm 02:19 PM

Detailed explanation of the causes and solutions of 0x0000007f blue screen code

Tsinghua University and Zhipu AI open source GLM-4: launching a new revolution in natural language processing Tsinghua University and Zhipu AI open source GLM-4: launching a new revolution in natural language processing Jun 12, 2024 pm 08:38 PM

Tsinghua University and Zhipu AI open source GLM-4: launching a new revolution in natural language processing

See all articles