[JavaScript creates random colors] multiple ways to create random colors

Source: Internet
Author: User
Tags closure cos sin

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.