首頁 > 開發者 > JavaScript
在製作餅圖或標籤雲時，我們通常需要很多顏色，方法有二。一是準備一組漂亮的候選顏色，二是隨機產生顏色。在數量很多或不明確時，我想後者就是唯一的出路了。Google了一下，整理如下，按由淺入深的順序排列。
實現1 var getRandomColor = function(){ return '#' + (function(color){ return (color += '0123456789abcdef'[Math.floor(Math.random()*16)]) && (color.length == 6) ? color : arguments.callee(color); })(''); }
隨機產生6個字元然後再串到一起，閉包調用自身與三元運算子讓程式變得內斂，初心者應該好好學習這種寫法。
實現2 var getRandomColor = function(){ return (function(m,s,c){ return (c ? arguments.callee(m,s,c-1) : '#') + s[m.floor(m.random() * 16)] })(Math,'0123456789abcdef',5) }
把Math對象，用於產生hex顏色值的字串提取出來，並利用第三個參數來判斷是否還繼續調用自身。
實現3 Array.prototype.map = function(fn, thisObj) { var scope = thisObj || window; var a = []; for ( var i=0, j=this.length; i < j; ++i ) { a.push(fn.call(scope, this[i], i, this)); } return a; }; var getRandomColor = function(){ return '#'+'0123456789abcdef'.split('').map(function(v,i,a){ return i>5 ? null : a[Math.floor(Math.random()*16)] }).join(''); }
這個要求我們對數組做些擴充，map將返回一個數組，然後我們再用join把它的元素串成字元。
實現4 var getRandomColor = function(){ return '#'+Math.floor(Math.random()*16777215).toString(16); }
這個實現非常逆天，雖然有點小bug。我們知道hex顏色值是從#000000到#ffffff，後面那六位元是16進位數，相當於"0x000000"到"0xffffff"。這實現的思路是將hex的最大值ffffff先轉換為10進位，進行random後再轉換回16進位。我們看一下，如何得到16777215 這個數值的。
<br /><!doctype html><br /><meta charset="utf-8"/><br /><meta http-equiv="X-UA-Compatible" content="IE=8"/><br /><title>hex的最大值</title><br /><script type="text/javascript" charset="utf-8"><br /> window.onload = function () {<br /> alert(parseInt("0xffffff",16).toString(10));<br /> };<br /></script><br /><div id="text"></div><br />
運行代碼
實現5 var getRandomColor = function(){ return '#'+(Math.random()*0xffffff<<0).toString(16); }
基本實現4的改進，利用左移運算子把0xffffff轉化為整型。這樣就不用記16777215了。由於左移運算子的優先順序比不上乘號，因此隨機後再左移，連Math.floor也不用了。
實現6 var getRandomColor = function(){ return '#'+(function(h){ return new Array(7-h.length).join("0")+h })((Math.random()*0x1000000<<0).toString(16)) }
修正上面版本的bug（無法產生純白色與hex位元不足問題）。0x1000000相當0xffffff+1，確保會抽選到0xffffff。在閉包裡我們處理hex值不足6位的問題，直接在未位補零。
實現7 var getRandomColor = function(){ return '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6); }
這次在前面補零，連遞迴檢測也省了。
上面版本產生顏色的範圍算是大而全，但隨之而來的問題是顏色不好看，於是實現8搞出來了。它產生的顏色相當鮮豔。
實現8 var getRandomColor = function(){ return "hsb(" + Math.random() + ", 1, 1)"; }
實戰一下：
<br /><!doctype html><br /><html dir="ltr" lang="zh-CN"><br /> <head><br /> <meta charset="utf-8"/><br /> <meta http-equiv="X-UA-Compatible" content="IE=8"><br /> <title>初級餅圖</title><br /> <script src="http://bloghighlighter.googlecode.com/files/raphael-min.js" type="text/javascript" ></script><br /> <script type="text/javascript" charset="utf-8"></p><p> var getRandomColor = function(){<br /> return "hsb(" +[ Math.random() ,Math.random(),1] +")";<br /> }</p><p> window.onload = function () {<br /> var paper = Raphael("canvas", 700, 700);<br /> paper.rect(0, 0, 640, 480,10).attr({fill: "#F2F1D7",stroke: "none"});//設定畫板</p><p> function drawSector(cx,cy,r,paper,oc,startAngle){<br /> var angleplus = 360 * oc / 100,//360度乘以40%<br /> startAngle = startAngle || 0,<br /> endAngle =startAngle+angleplus,<br /> rad = Math.PI / 180,<br /> x1 = cx + r * Math.cos(-startAngle * rad),<br /> x2 = cx + r * Math.cos(-endAngle * rad),<br /> y1 = cy + r * Math.sin(-startAngle * rad),<br /> y2 = cy + r * Math.sin(-endAngle * rad);<br /> var path = ["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, "z"];<br /> path = path.join(" ");<br /> paper.path({fill:getRandomColor()},path);<br /> return endAngle<br /> }<br /> var ocs = [40,25,17,10,8];<br /> for(var i=0,l=ocs.length,startAngle;i<l;i++){<br /> startAngle = drawSector(300,300,100,paper,ocs[i],startAngle);<br /> }</p><p> };<br /> </script><br /> <style type="text/css" media="screen"><br /> #canvas {<br /> width: 700px;<br /> height: 700px;<br /> }<br /> </style><br /> <title>初級餅圖</title><br /> </head><br /> <body><br /> <p>初級餅圖</p><br /> <div id="canvas"></div><br /> </body><br /></html><br />
運行代碼
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
