j**ascript获取随机颜色

时间：2016.04.26 发布人：heliusaaa

已解决问题

谷歌heliusaaa用户在2016.04.26提交了关于“自然堂j**ascript获取随机颜色”的提问，欢迎大家涌跃发表自己的观点。目前共有1个回答，最后更新于2025-01-17T14:22:57。希望大家能够帮助她。

详细问题描述及疑问：期待您的答案，希望你能感受到,我最真诚的谢意！

希望以下的回答，能够帮助你。

第1个回答

用户名：xi来自aodoudi444 时间：2016.04.26

　　问答在制作饼图或标签云时，我们通常需要很多颜色，方法注记斯脱先饭垂沉术工有二。一是准备一获协德海交组漂亮的候选颜色，二是随机生成颜色。在数量很多或不明确时，我想后者就是唯一的出路了。谷歌服讨了一下，整理如下，按由浅入深的顺序排列。

　　实现1

以下为引用的内批翻房场轮排热容：

1.vargetRandomColor=functi量样住八任on(){

2.return'#'+3.(function(color){4.return(color+='0123456789abcdef'[Math.floor(Math.random()*至富始地间展安营三经16)])5.&&(color.length==6)?color:arguments.callee(color);6.})('');7.}

　　随机生成6个字符然后再串到一起，闭包调用自身与三元运算符让程序变得内敛，初心者应该好好学习这种写法。

　　实现2

以下为引用的内容：

发应身座弱现因1.vargetRandomColor=function(){

2.return(function(m,s,c){附保吧能认销学乎3.return(c?arguments.callee(m,s,c-1):'#')+4.s[m小准布井差胞.floor(m.random()*16)]5.})(Math,'0消广权宜123456789abcdef',5)6.}

　　钱力搞把Math对象，用于生成hex颜色值的字符串提取出来，并利用第三个参数来判断是否还继续调用自身。

　　实现3

以下为引用的内容：

1.Array.***.ma基管只案石矛获优则克p=function(fn,thisObj){

02.varscope=thisObj||window;03.vara丰都击周劳班层=[];04.for(vari=0,j=this.length;i<j;++i){05.a.push(***.call(scope,this[i],i,this));06.}07.returna;08.};09.vargetRandomColor=function(){10.return'#花'+'0123456推品屋术想789abcdef'.split('').map(function(v,i,a){11.returni>5?**ll:a[Math.floor(Math.random()*16)]}).join('');12.}

　　这贵据命区效个要求我们对数组做些扩展，map将返回一个数组，酸备然后我们再用join把它的元素串成字符。

　　唱盟染毛实现4

以下为引用的内容：

1.vargetRandomColor=function(){

2.return'#'+Math.floor(Math.random()*16777215).toString(16);3.}

　　这个实现非常逆天，虽然有点小bug。我们知道hex颜色值是从#000000到#ffffff，后面那六位数是16进制数，相当于“0x000000”到“0xffffff”。这实现的思路是将hex的最大值ffffff先转换为10进制，进行random后再转换回16进制。我们看一下，如何得到16777215这个数值的。

以下为引用的内容：

<!doctypehtml><metacharset="utf-8"/><metahttp-equiv="X-UA-Compatible"content="IE=8"/><title>hex的最大值</title><scripttype="text/j**ascript"charset="utf-8">window.onload=function(){alert(parseInt("0xffffff",16).toString(10));};</script><divid="text"></div>

　　实现5

以下为引用的内容：

1.vargetRandomColor=function(){

2.return'#'+(Math.random()*0xffffff<<0).toString(16);3.}

　　基本实现4的改进，利用左移运算符把0xffffff转化为整型。这样就不用记16777215了。由于左移运算符的优先级比不上乘号，因此随机后再左移，连Math.floor也不用了。

　　实现6

　　以下为引用的内容：

　　1.vargetRandomColor=function(){

　　2.return'#'+(function(h){

　　3.returnnewArray(7-h.length).join("0")+h

　　4.})((Math.random()*0x1000000<<0).toString(16))

　　5.}

　　修正上面版本的bug(无法生成纯白色与hex位数不足问题)。0x1000000相当0xffffff+1，确保会抽选到0xffffff。在闭包里我们处理hex值不足5位的问题，直接在未位补零。

　　实现7

以下为引用的内容：

1.vargetRandomColor=function(){

2.return'#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).substr(-6);3.}

　　这次在前面补零，连递归检测也省了。

　　实战一下：

以下为引用的内容：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDh**TML4.01//EN""http://www.***.org/TR/html4/strict.dtd"><htmllang="zh-cn"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"><title>初级饼图</title><scriptsrc="http://blog**lighter.***.com/files/raphael-min.js"type="text/j**ascript"></script><scripttype="text/j**ascript"charset="utf-8">vargetRandomColor=function(){return'#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).substr(-6);}

window.onload=function(){varpaper=Raphael("canvas",700,700);paper.rect(0,0,640,480,10).attr({fill:"#F2F1D7",stroke:"none"});//设置画板

functiondrawSector(cx,cy,r,paper,oc,startAngle){varangleplus=*oc/100,//度乘以40%startAngle=startAngle||0,endAngle=startAngle+angleplus,rad=Math.PI/180,x1=cx+r*Math.cos(-startAngle*rad),x2=cx+r*Math.cos(-endAngle*rad),y1=cy+r*Math.sin(-startAngle*rad),y2=cy+r*Math.sin(-endAngle*rad);varpath=["M",cx,cy,"L",x1,y1,"A",r,r,0,+(endAngle-startAngle>180),0,x2,y2,"z"],

path=path.join("");paper.path({fill:getRandomColor()},path);returnendAngle}varocs=[40,25,17,10,8];for(vari=0,l=ocs.length,startAngle;i<l;i++){startAngle=drawSector(300,300,100,paper,ocs[i],startAngle);}

};</script><styletype="text/css"media="screen">#canvas{width:700px;height:700px;}</style><title>初级饼图</title></head><body><p>初级饼图</p><divid="canvas"></div></body></html>