浅析利用Javascript获取随机颜色
创始人
2024-06-08 01:00:37
0

本文将谈到利用Javascript获取随机颜色,这里我们需要知道做Javascript获取随机颜色主要是在作图时方便展示,希望大家能从本文获得帮助。

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

实现1

  1. var getRandomColor = function(){    
  2. return  '#' +      
  3. (function(color){      
  4. return (color +=  '0123456789abcdef'[Math.floor(Math.random()*16)])        
  5. && (color.length == 6) ?  color : arguments.callee(color);    
  6. })('');   

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

实现2

  1. var getRandomColor = 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,'0123456789abcdef',5)   

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

实现3

  1. Array.prototype.map = function(fn, thisObj) {    
  2. var scope = thisObj || window;   
  3. var a = [];    
  4. for ( var i=0, j=this.length; i < j; ++i ) {      
  5. a.push(fn.call(scope, this[i], i, this));    
  6. }    
  7. return a;   
  8. };   
  9. var getRandomColor = function(){   
  10. return '#'+'0123456789abcdef'.split('').map(function(v,i,a){       
  11. return i>5 ? null : a[Math.floor(Math.random()*16)] }).join('');   

这个要求我们对数组做些扩展,map将返回一个数组,然后我们再用join把它的元素串成字符。

实现4

  1. var getRandomColor = function(){    
  2. return '#'+Math.floor(Math.random()*16777215).toString(16);   

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

  1. > 
  2.  charset="utf-8"/> 
  3.  http-equiv="X-UA-Compatible" content="IE=8"/> 
  4. </FONT></STRONG>hex的***值<STRONG><FONT color=#006699> 
  5.  type="text/javascript" charset="utf-8"> 
  6. window.onload = function () {  
  7. alert(parseInt("0xffffff",16).toString(10));  
  8. };  
  9.  
  10.  id="text">
 

运行代码

实现5

  1. var getRandomColor = function(){    
  2. return '#'+(Math.random()*0xffffff<<0).toString(16);   

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

实现6

  1. var getRandomColor = function(){   
  2. return '#'+(function(h){     
  3. return new Array(7-h.length).join("0")+h   
  4. })((Math.random()*0x1000000<<0).toString(16))   

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

实现7

  1. var getRandomColor = function(){   
  2. return '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).substr(-6);   

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

上面版本生成颜色的范围算是大而全,但随之而来的问题是颜色不好看,于是实现8搞出来了。它生成的颜色相当鲜艳。

实现8

  1. var getRandomColor = function(){      
  2. return "hsb(" + Math.random()  + ", 1, 1)";   

实战一下:

  1.  
  2. "ltr" lang="zh-CN">  
  3.  
  4. "utf-8"/>  
  5. "X-UA-Compatible" content="IE=8">  
  6. 初级饼图  
  7. "http://bloghighlighter.googlecode.com/files/raphael-min.js" type="text/javascript" >  
  8. "text/javascript" charset="utf-8">  
  9.  
  10. var getRandomColor = function(){  
  11. return "hsb(" + Math.random()  + ", 1, 1)";  
  12. }  
  13.  
  14. window.onload = function () {  
  15. var paper = Raphael("canvas", 700, 700);  
  16. paper.rect(0, 0, 640, 480,10).attr({fill: "#F2F1D7",stroke: "none"});//设置画板  
  17.  
  18. function drawSector(cx,cy,r,paper,oc,startAngle){  
  19. var angleplus = 360 * oc / 100,//360度乘以40%  
  20. startAngle = startAngle || 0,  
  21. endAngle =startAngle+angleplus,  
  22. rad = Math.PI / 180,  
  23. x1 = cx + r * Math.cos(-startAngle * rad),  
  24. x2 = cx + r * Math.cos(-endAngle * rad),  
  25. y1 = cy + r * Math.sin(-startAngle * rad),  
  26. y2 = cy + r * Math.sin(-endAngle * rad);  
  27. var path = ["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, "z"];  
  28. path = path.join(" ");  
  29. paper.path({fill:getRandomColor()},path);  
  30. return endAngle  
  31. }  
  32. var ocs = [40,25,17,10,8];  
  33. for(var i=0,l=ocs.length,startAngle;istartAngle = drawSector(300,300,100,paper,ocs[i],startAngle);  
  34. }  
  35.  
  36. };  
  37.  
  38. "text/css" media="screen">  
  39. #canvas {  
  40. width: 700px;  
  41. height: 700px;  
  42. }  
  43.  
  44. 初级饼图  
  45.  
  46.  
  47. 初级饼图

     
  48. "canvas">
 
  •  
  •  
  • 运行代码

    原文标题:javascript获取随机颜色

    链接:http://www.cnblogs.com/rubylouvre/archive/2009/09/24/1572977.html

    【编辑推荐】

    1. JSON是什么?为JavaScript准备的数据格式
    2. 十个最常用的JavaScript自定义函数
    3. 有关JavaScript事件加载的一些延伸思考
    4. JavaScript使用心得汇总:从BOM和DOM谈起
    5. ExtJS在Android模拟器上的运行效果

    相关内容

    热门资讯

    如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
    如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
    施耐德电气数据中心整体解决方案... 近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...
    20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
    德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站,直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
    为啥国人偏爱 Mybatis,... 关于 SQL 和 ORM 的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行...
    《非诚勿扰》红人闫凤娇被曝厕所... 【51CTO.com 综合消息360安全专家提醒说,“闫凤娇”、“非诚勿扰”已经被黑客盯上成为了“木...
    2012年第四季度互联网状况报... [[71653]]  北京时间4月25日消息,据国外媒体报道,全球知名的云平台公司Akamai Te...