[ 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 运行代码
时间: 2024-11-03 21:17:58

[ javascript 创建随机颜色 ] 多种方式来创建随机颜色的相关文章

使用docker创建静态网站应用-多种方式

原文:使用docker创建静态网站应用-多种方式 能承载静态网站的服务器有很多,本文使用,nginx.apache.tomcat服务器演示docker静态网站应用设置 一,创建docker文件, 不同服务器的docker文件不一样,下面分别创建nginx.apache.tomcat三个服务器的docker文件,其实主要就是区别于FROM标签于项目文件目录 目录结构褥子: 1,nginx 的 docker文件 FROM nginx COPY ./www /usr/share/nginx/html/

11.09创建控制器和创建视图的多种方式

(一) 创建控制器的四种方法 (1)sb // 传niu就相当于[NSBundle mainbundle]: UIStoryboard *sb = [UIStoryboard storyboardWithName:@"MYStoryBoard" bundle:nil]; self.window.rootViewController = [sb instantiateInitialViewController]; (2)sb+可重用标示 UIStoryboard *sb = [UISto

创建线程的多种方式

1 public class Demo1 extends Thread{ 2 3 @Override 4 public void run() { 5 while(!interrupted()) { 6 System.out.println(getName()+"线程执行了"); 7 try { 8 Thread.sleep(200); 9 } catch (InterruptedException e) { 10 // TODO Auto-generated catch block 1

JavaScript中继承的多种方式和优缺点

// 原型链继承 /** * 1. 原型链继承 * 缺点: * 1. 在子类中不能向父类传参 * 2. 父类中所有引用类型的属性会被所有子类实例共享,也就说一个子类实例修改了父类中的某个引用类型的属性时,其他子类实例也会受到影响 */ function Parent() { this.name = "parent"; this.hobby = ["sing", "rap"]; } function Child() { this.type = &q

JavaScript 中实现继承的方式(列举3种在前一章,我们曾经讲解过创建类的最好方式是用构造函数定义属性,用原型定义方法。)

第一种:对象冒充 function ClassA(sColor) { this.color = sColor; this.sayColor = function () { alert(this.color); }; } function ClassB(sColor, sName) { this.newMethod = ClassA; this.newMethod(sColor); delete this.newMethod; this.name = sName; this.sayName = f

iOS-多线程 ,整理集锦,多种线程的创建

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { self.window = [[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]] autorelease]; //创建线程的第一种方式 NSThread *thread = [[NSThread all

JavaScript---网络编程(9-1)--DHTML技术演示(2-1)-表格创建的几种方式

一:用最底层的方式,该方式用来创建别的对象树也可以 代码演示: <html> <head> <title>DHTML技术演示---表格创建--用最底层的方式,其实该方式用来创建别的对象树也可以</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css&qu

创建String字符串的方式与区别

Java中创建一个字符串的方式有很多种,常见如: String s = new String("riqi"); String s = "riqi"; 但两者有什么区别呢? 要知道,Java中new一个对象实际上是在栈内存中创建一个引用类型指向到堆内存中的对象,而字符串对象一旦创建就不能变更. Java为String类型提供了缓冲池机制,即当使用双引号方式创建字符串对象时,Java环境首先会从字符串缓冲池中寻找相同内容的字符串,如果找到则直接拿过来使用,如果没有则创建

控制器创建的三种方式

1 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 2 { 3 // 1.创建UIWindow 4 self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]]; 5 self.window.backgroundColor = [UIC