Home > Developer > JavaScript
8 when making a pie chart or tag cloud, we usually need a lot of color, method two. One is to prepare a beautiful set of candidate colors, and the second is to randomly generate colors. In a lot of or unclear, I think the latter is the only way out. Google a bit, organized as follows, according to the order of the more than descending. Ten Implementation 1 One A varGetrandomcolor =function(){ - return' # ' + -(function(color) { the return(Color + = ' 0123456789abcdef ' [Math.floor (Math.random () *16)]) -&& (Color.length = = 6)?Color:arguments.callee (color); -})(‘‘); - } + randomly generated 6 characters and then strung together, the closure calls itself and the ternary operator to make the program become introverted, beginner's mind should learn this writing. - + Implementation 2 A at varGetrandomcolor =function(){ - return(function(m,s,c) { - return(c. Arguments.callee (m,s,c-1): ' # ') + -S[m.floor (M.random () * 16)] -}) (Math, ' 0123456789abcdef ', 5) - } in extracts the Math object, the string used to generate the hex color value, and uses the third argument to determine if it continues to invoke itself. - to Implementation 3 + -Array.prototype.map =function(FN, thisobj) { the varScope = Thisobj | |window; * varA = []; $ for(varI=0, j= This. length; I < J; ++i) {Panax NotoginsengA.push (Fn.call (Scope, This[i], I, This)); - } the returnA; + }; A varGetrandomcolor =function(){ the return' # ' + ' 0123456789abcdef '. Split ('). Map (function(v,i,a) { + returnI>5?NULL: A[math.floor (Math.random () *16)]}). Join ('); - } $ This requires us to do some expansion of the array, and the map will return a list, and then we'll use join to string its elements into characters. $ - Implementation 4 - the varGetrandomcolor =function(){ - return' # ' +math.floor (Math.random () *16777215). toString (16); Wuyi } theThis implementation is very counter-day, although a little bit small bug. We know that hex color value is from #000000 to #ffffff, the back of which six digits is 16 binary, equivalent to "0x000000" to "0XFFFFFF". The idea is to convert the maximum hex value FFFFFF first to 10, and then convert it back to 16 after random. Let's take a look at how to get 16777215 of this value. - Wu<!doctype html> -<meta charset= "Utf-8"/> About<meta http-equiv= "x-ua-compatible" content= "ie=8"/> $Maximum value of <title>hex </title> -<script type= "Text/javascript" charset= "Utf-8" > -Window.onload =function () { -Alert (parseint ("0xffffff", +). ToString (10)); A }; +</script> the<div id= "Text" ></div> - Run code $ the Implementation 5 the the varGetrandomcolor =function(){ the return' # ' + (Math.random () *0xffffff<<0). toString (16); - } in The basic implementation of the 4 improvement, using the left shift operator to convert 0XFFFFFF to an integer type. So you don't have to remember 16777215. Since the priority of the left-shift operator is less than multiplication sign, it is randomly shifted to the left and even Math.floor is not used. the the Implementation 6 About the varGetrandomcolor =function(){ the return' # ' + (function(h) { the return NewArray (7-h.length). Join ("0") +h +}) ((Math.random () *0x1000000<<0). toString (16)) - } theFixed the bug in the previous version (unable to generate pure white and hex digits not enough problem). 0x1000000 quite 0xffffff+1, make sure the 0xFFFFFF is selected. In the closure we deal with the hex value of less than 6 bits of the problem, directly in the non-fill 0. Bayi the Implementation 7 the - varGetrandomcolor =function(){ - return' # ' + (' 00000 ' + (Math.random () *0x1000000<<0). ToString (+)). substr (-6); the } the this time in front of 0, even recursive detection also saved. the the The above version of the generated color range is chatty, but the problem is that the color is not good-looking, so the implementation of 8 out. It produces a fairly vivid color. - the Implementation 8 the the varGetrandomcolor =function(){ 94 return"HSB (" + math.random () + ", 1, 1)"; the } the actual combat: the 98<!doctype html> About -101<meta charset= "Utf-8"/>102<meta http-equiv= "x-ua-compatible" content= "ie=8" >103<title> Beginner Pie Chart </title>104<script src= "Http://bloghighlighter.googlecode.com/files/raphael-min.js" type= "Text/javascript" ></ Script> the<script type= "Text/javascript" charset= "Utf-8" >106 107 varGetrandomcolor =function(){ 108 return"HSB (" + math.random () + ", 1, 1)"; 109 } the 111Window.onload =function () { the varpaper = Raphael ("Canvas", 700, 700); 113Paper.rect (0, 0, 640, 480,10). attr ({fill: "#F2F1D7", Stroke: "None"});//Set up Artboards the the functionDrawsector (cx,cy,r,paper,oc,startangle) { the varAngleplus = oc/100,//360 degrees times 40% .117StartAngle = StartAngle | | 0, 118Endangle =startangle+Angleplus,119rad = math.pi/180, -X1 = cx + R * Math.Cos (-startangle *rad),121x2 = cx + R * Math.Cos (-endangle *rad),122Y1 = cy + R * Math.sin (-startangle *rad),123y2 = cy + R * Math.sin (-endangle *Rad); 124 varPath = ["M", CX, CY, "L", x1, y1, "A", R, R, 0, + (Endangle-startangle >), 0, x2, y2, "Z"]; thePath = Path.join (""); 126 Paper.path ({fill:getrandomcolor ()},path); 127 returnEndangle - } 129 varOCS = [40,25,17,10,8]; the for(vari=0,l=ocs.length,startangle;i<l;i++){ 131StartAngle = Drawsector (300,300,100, Paper,ocs[i],startangle); the } 133 134 }; 135</script>136<style type= "text/css" media= "screen" >137 #canvas {138 width:700px; 139 height:700px; $ } 141</style>142<title> Beginner Pie Chart </title>143144<body>145<p> Beginner Pie Chart </p>146<div id= "Canvas" ></div>147</body>148149Run code
[JavaScript creates random colors] multiple ways to create random colors
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
