[ javascript 创建随机颜色 ] 多种方式来创建随机颜色

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[ javascript 创建随机颜色 ] 多种方式来创建随机颜色相关的知识,希望对你有一定的参考价值。

  8 在制作饼图或标签云时,我们通常需要很多颜色,方法有二。一是准备一组漂亮的候选颜色,二是随机生成颜色。在数量很多或不明确时,我想后者就是唯一的出路了。谷歌了一下,整理如下,按由浅入深的顺序排列。

 10 实现1
 11 
 12 var getRandomColor = function(){    
 13 return  ‘#‘ +      
 14 (function(color){      
 15 return (color +=  ‘0123456789abcdef‘[Math.floor(Math.random()*16)])        
 16 && (color.length == 6) ?  color : arguments.callee(color);    
 17 })(‘‘);   
 18 } 
 19 随机生成6个字符然后再串到一起,闭包调用自身与三元运算符让程序变得内敛,初心者应该好好学习这种写法。
 20 
 21 实现2
 22 
 23 var getRandomColor = function(){    
 24 return (function(m,s,c){    
 25 return (c ? arguments.callee(m,s,c-1) : ‘#‘) +        
 26 s[m.floor(m.random() * 16)]   
 27 })(Math,‘0123456789abcdef‘,5)   
 28 } 
 29 把Math对象,用于生成hex颜色值的字符串提取出来,并利用第三个参数来判断是否还继续调用自身。
 30 
 31 实现3
 32 
 33 Array.prototype.map = function(fn, thisObj) {    
 34 var scope = thisObj || window;   
 35 var a = [];    
 36 for ( var i=0, j=this.length; i < j; ++i ) {      
 37 a.push(fn.call(scope, this[i], i, this));    
 38 }    
 39 return a;   
 40 };   
 41 var getRandomColor = function(){   
 42 return ‘#‘+‘0123456789abcdef‘.split(‘‘).map(function(v,i,a){       
 43 return i>5 ? null : a[Math.floor(Math.random()*16)] }).join(‘‘);   
 44 } 
 45 这个要求我们对数组做些扩展,map将返回一个数组,然后我们再用join把它的元素串成字符。
 46 
 47 实现4
 48 
 49 var getRandomColor = function(){    
 50 return ‘#‘+Math.floor(Math.random()*16777215).toString(16);   
 51 } 
 52 这个实现非常逆天,虽然有点小bug。我们知道hex颜色值是从#000000到#ffffff,后面那六位数是16进制数,相当于"0x000000"到"0xffffff"。这实现的思路是将hex的最大值ffffff先转换为10进制,进行random后再转换回16进制。我们看一下,如何得到16777215 这个数值的。
 53 
 54 <!doctype html> 
 55 <meta charset="utf-8"/> 
 56 <meta http-equiv="X-UA-Compatible" content="IE=8"/> 
 57 <title>hex的最大值</title> 
 58 <script type="text/javascript" charset="utf-8"> 
 59 window.onload = function () {  
 60 alert(parseInt("0xffffff",16).toString(10));  
 61 };  
 62 </script> 
 63 <div id="text"></div> 
 64 运行代码
 65 
 66 实现5
 67 
 68 var getRandomColor = function(){    
 69 return ‘#‘+(Math.random()*0xffffff<<0).toString(16);   
 70 } 
 71 基本实现4的改进,利用左移运算符把0xffffff转化为整型。这样就不用记16777215了。由于左移运算符的优先级比不上乘号,因此随机后再左移,连Math.floor也不用了。
 72 
 73 实现6
 74 
 75 var getRandomColor = function(){   
 76 return ‘#‘+(function(h){     
 77 return new Array(7-h.length).join("0")+h   
 78 })((Math.random()*0x1000000<<0).toString(16))   
 79 } 
 80 修正上面版本的bug(无法生成纯白色与hex位数不足问题)。0x1000000相当0xffffff+1,确保会抽选到0xffffff。在闭包里我们处理hex值不足6位的问题,直接在未位补零。
 81 
 82 实现7
 83 
 84 var getRandomColor = function(){   
 85 return ‘#‘+(‘00000‘+(Math.random()*0x1000000<<0).toString(16)).substr(-6);   
 86 } 
 87 这次在前面补零,连递归检测也省了。
 88 
 89 上面版本生成颜色的范围算是大而全,但随之而来的问题是颜色不好看,于是实现8搞出来了。它生成的颜色相当鲜艳。
 90 
 91 实现8
 92 
 93 var getRandomColor = function(){      
 94 return "hsb(" + Math.random()  + ", 1, 1)";   
 95 } 
 96 实战一下:
 97 
 98 <!doctype html>  
 99 <html dir="ltr" lang="zh-CN">  
100 <head>  
101 <meta charset="utf-8"/>  
102 <meta http-equiv="X-UA-Compatible" content="IE=8">  
103 <title>初级饼图</title>  
104 <script src="http://bloghighlighter.googlecode.com/files/raphael-min.js" type="text/javascript" ></script>  
105 <script type="text/javascript" charset="utf-8">  
106  
107 var getRandomColor = function(){  
108 return "hsb(" + Math.random()  + ", 1, 1)";  
109 }  
110  
111 window.onload = function () {  
112 var paper = Raphael("canvas", 700, 700);  
113 paper.rect(0, 0, 640, 480,10).attr({fill: "#F2F1D7",stroke: "none"});//设置画板  
114  
115 function drawSector(cx,cy,r,paper,oc,startAngle){  
116 var angleplus = 360 * oc / 100,//360度乘以40%  
117 startAngle = startAngle || 0,  
118 endAngle =startAngle+angleplus,  
119 rad = Math.PI / 180,  
120 x1 = cx + r * Math.cos(-startAngle * rad),  
121 x2 = cx + r * Math.cos(-endAngle * rad),  
122 y1 = cy + r * Math.sin(-startAngle * rad),  
123 y2 = cy + r * Math.sin(-endAngle * rad);  
124 var path = ["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, "z"];  
125 path = path.join(" ");  
126 paper.path({fill:getRandomColor()},path);  
127 return endAngle  
128 }  
129 var ocs = [40,25,17,10,8];  
130 for(var i=0,l=ocs.length,startAngle;i<l;i++){  
131 startAngle = drawSector(300,300,100,paper,ocs[i],startAngle);  
132 }  
133  
134 };  
135 </script>  
136 <style type="text/css" media="screen">  
137 #canvas {  
138 width: 700px;  
139 height: 700px;  
140 }  
141 </style>  
142 <title>初级饼图</title>  
143 </head>  
144 <body>  
145 <p>初级饼图</p>  
146 <div id="canvas"></div>  
147 </body>  
148 </html> 
149 运行代码

 

以上是关于[ javascript 创建随机颜色 ] 多种方式来创建随机颜色的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Javascript 中生成随机柔和(或更亮)的颜色?

用javascript生成多种颜色[重复]

使用事件侦听器(Javascript、jQuery)将 BG 颜色更改为随机颜色?

JavaScript随机生成颜色的方法

我正在尝试使用 JavaScript 生成随机颜色代码

JavaScript Javascript随机颜色