Zufallsgenerator für Farben

Question

Angesichts dieser Funktion möchte ich die Farbe mit einem Zufallsfarbgenerator.

document.overlay = GPolyline.fromEncoded({
    color: "#0000FF",
    weight: 10,
    points: encoded_points,
    zoomFactor: 32,
    levels: encoded_levels,
    numLevels: 4
});

Wie kann ich das tun?

Answer 1

Utilice getRandomColor() anstelle von "#0000FF" :

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

function setRandomColor() {
  $("#colorpad").css("background-color", getRandomColor());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="colorpad" style="width:300px;height:300px;background-color:#000">

</div>
<button onclick="setRandomColor()">Random Color</button>

Answer 2

Ich bezweifle, dass irgendetwas schneller oder kürzer sein wird als dieses:

"#" + ((1<<24)*Math.random() | 0).toString(16)

Herausforderung!

Answer 3

Hier ist eine andere Sichtweise auf dieses Problem.

Mein Ziel war es, leuchtende und klare Farben zu schaffen. Um sicherzustellen, dass die Farben deutlich sind, vermeide ich die Verwendung eines Zufallsgenerators und wähle "gleichmäßig verteilte" Farben aus dem Regenbogen.

Dies ist ideal für die Erstellung von Pop-Out-Marken in Google Maps, die eine optimale "Einzigartigkeit" aufweisen (d. h. keine zwei Markierungen haben ähnliche Farben).

/**
 * @param numOfSteps: Total number steps to get color, means total colors
 * @param step: The step number, means the order of the color
 */
function rainbow(numOfSteps, step) {
    // This function generates vibrant, "evenly spaced" colours (i.e. no clustering). This is ideal for creating easily distinguishable vibrant markers in Google Maps and other apps.
    // Adam Cole, 2011-Sept-14
    // HSV to RBG adapted from: http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript
    var r, g, b;
    var h = step / numOfSteps;
    var i = ~~(h * 6);
    var f = h * 6 - i;
    var q = 1 - f;
    switch(i % 6){
        case 0: r = 1; g = f; b = 0; break;
        case 1: r = q; g = 1; b = 0; break;
        case 2: r = 0; g = 1; b = f; break;
        case 3: r = 0; g = q; b = 1; break;
        case 4: r = f; g = 0; b = 1; break;
        case 5: r = 1; g = 0; b = q; break;
    }
    var c = "#" + ("00" + (~ ~(r * 255)).toString(16)).slice(-2) + ("00" + (~ ~(g * 255)).toString(16)).slice(-2) + ("00" + (~ ~(b * 255)).toString(16)).slice(-2);
    return (c);
}

Wenn Sie sehen möchten, wie das in der Praxis aussieht, sehen Sie unter Einfacher JavaScript-Regenbogen-Farbgenerator für Google Map Marker .

Answer 4

Wer kann ihn schlagen?

'#' + Math.random().toString(16).substr(-6);

Es ist garantiert, dass es immer funktioniert : http://jsbin.com/OjELIfo/2/edit

Basierend auf Kommentar von eterps kann der obige Code immer noch kürzere Zeichenfolgen erzeugen, wenn die hexadezimale Darstellung der Zufallsfarbe sehr kurz ist ( 0.730224609375 => 0.baf ).

Dieser Code sollte in allen Fällen funktionieren:

function makeRandomColor(){
  var c = '';
  while (c.length < 7) {
    c += (Math.random()).toString(16).substr(-6).substr(-1)
  }
  return '#' + c;
}

Answer 5

Sie können auch HSL verwenden, das in jedem guten Browser verfügbar ist ( http://caniuse.com/#feat=css3-colors )

function randomHsl() {
    return 'hsla(' + (Math.random() * 360) + ', 100%, 50%, 1)';
}

So erhalten Sie nur helle Farben. Sie können mit Helligkeit, Sättigung und Alpha spielen.

// es6
const randomHsl = () => `hsla(${Math.random() * 360}, 100%, 50%, 1)`