random css nombre - Le meilleur moyen de générer une couleur aléatoire en JavaScript?





4 Answers

J'aime votre deuxième option, bien qu'elle puisse être un peu plus simple:

// Math.pow is slow, use constant instead.
var color = Math.floor(Math.random() * 16777216).toString(16);
// Avoid loops.
return '#000000'.slice(0, -color.length) + color;
entier math math.random

Sans utiliser de cadre

J'ai écrit 2 fonctions:

function get_random_color() 
{
    var color = "";
    for(var i = 0; i < 3; i++) {
        var sub = Math.floor(Math.random() * 256).toString(16);
        color += (sub.length == 1 ? "0" + sub : sub);
    }
    return "#" + color;
}

function get_rand_color()
{
    var color = Math.floor(Math.random() * Math.pow(256, 3)).toString(16);
    while(color.length < 6) {
        color = "0" + color;
    }
    return "#" + color;
}

Lequel serait considéré comme le meilleur? Y a-t-il de meilleurs moyens de le faire?




Comme George a dit que la meilleure façon est d'utiliser HSL, ainsi vous pouvez générer un tas de couleurs distinctes identifiables par l'homme. L'idée similaire est implémentée dans Adams Cole réponse à la question similaire, mais son code a aléatoire générateur de couleurs et hsl-> hex rgb traducteur regroupés ce qui le rend difficile à comprendre et à modifier.

Si vous utilisez l'une des bibliothèques de manipulation de couleur javascript (comme jquery-color ), la génération de couleur devient triviale:

function rainbow() {
  // 30 random hues with step of 12 degrees
  var hue = Math.floor(Math.random() * 30) * 12;

  return $.Color({
    hue: hue,
    saturation: 0.9,
    lightness: 0.6,
    alpha: 1
  }).toHexString();
};



Je l'ai fait comme ça, avec l'aide d'autres réponses:

'#' + parseInt(Math.random() * 0xffffff).toString(16)



Cette réponse est la meilleure méthode.

Vous devez choisir des couleurs connues au lieu de vous fier à des méthodes purement numériques. Vous pouvez utiliser des sites comme ColorBrewer pour choisir des palettes de couleurs qui fonctionnent bien en fonction du problème (ensemble de données qualitatives, quantitatives, ColorBrewer ).

['red','orange','yellow','green','blue','purple'][Math.random()*6|0]

var colors = {
  rainbow: ['red', 'orange', 'yellow', 'green', 'blue', 'purple'],
  qual: ['#8dd3c7', '#ffffb3', '#bebada', '#fb8072', '#80b1d3', '#fdb462', '#b3de69', '#fccde5', '#d9d9d9', '#bc80bd', '#ccebc5', '#ffed6f'],
  quant: ['#fff7ec', '#fee8c8', '#fdd49e', '#fdbb84', '#fc8d59', '#ef6548', '#d7301f', '#b30000', '#7f0000'],
  div: ['#67001f','#b2182b','#d6604d','#f4a582','#fddbc7','#f7f7f7','#d1e5f0','#92c5de','#4393c3','#2166ac','#053061']
};
randc = function(array) {
  return array[Math.random() * array.length | 0]
}
genc = function() {
  var frag = [];
  var arr = colors[$("select").val()];
  for (var i = 0; i < 1024; i++) {
    frag.push("<div style='background-color:" + randc(arr) + ";'></div>");
  }
  $("#demo").html(frag.join(''));
}
genc();
$("select").on("change", genc);
#demo {
  margin-top: 10px;
  font-size: 0;
}
#demo div {
  display: inline-block;
  width: 24px;
  height: 24px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value='qual'>Qualitative (categorical)</option>
  <option value='quant'>Quantitative (sequential)</option>
  <option value='div'>Divergent (republicans versus democrats)</option>
  <option value='rainbow'>Rainbow (my little pony)</option>
</select>
<div id='demo'></div>




Related