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

Ich denke, die erste Antwort ist die prägnanteste und nützlichste, aber ich habe gerade eine geschrieben, die für einen Anfänger wahrscheinlich leichter zu verstehen ist.

function randomHexColor(){
    var hexColor=[]; //new Array()
    hexColor[0] = "#"; //first value of array needs to be hash tag for hex color val, could also prepend this later

    for (i = 1; i < 7; i++)
    {
        var x = Math.floor((Math.random()*16)); //Tricky: Hex has 16 numbers, but 0 is one of them

        if (x >=10 && x <= 15) //hex:0123456789ABCDEF, this takes care of last 6 
        {
            switch(x)
            {
                case 10: x="a" 
                break;
                case 11: x="b" 
                break;
                case 12: x="c" 
                break;
                case 13: x="d" 
                break;
                case 14: x="e" 
                break;
                case 15: x="f" 
                break;  
            }
        }
        hexColor[i] = x;
    }
    var cString = hexColor.join(""); //this argument for join method ensures there will be no separation with a comma
    return cString;
}

Answer 2

Mit dieser Methode wird eine Zufallszahl ermittelt, in eine hexidezimale Zeichenkette umgewandelt und dann ein Teil davon extrahiert, so dass man ein zufälliges Hexadezimalzeichen erhält.

function randomColor() {
    return "#" + Math.random().toString(16).slice(2,8);
}

Answer 3

function getRandomColor()
{
    var color = "#";

    for (var i = 0; i < 3; i++)
    {
        var part = Math.round(Math.random() * 255).toString(16);

        color += (part.length > 1) ? part : "0" + part;
    }

    return color;
}

Answer 4

Überprüfung

Viele der hier gegebenen Antworten beruhen auf Math.random().toString(16) . Manchmal multiplizieren sie eine Zufallszahl mit einer Zahl und gehen davon aus, dass eine Umwandlung in eine hexadezimale Zeichenkette immer eine hexadezimale Fließkommadarstellung ergibt, die mindestens sechs Ziffern nach dem Punkt hat (und verwenden diese Ziffern als Farbe).

Dies ist eine Fehlannahme

Denn es gibt viele Zahlen, die weniger als sechs Ziffern (nach dem Punkt) ergeben. Wenn Math.random() eine solche Zahl wählen, dann wird die resultierende hexadezimale Farbe ungültig sein (es sei denn, jemand kümmert sich um diesen Fall). Hier ist ein Beispielgenerator (den ich auf der Grundlage von dieser Konverter ) für solche Werte.

function calc() {
  let n = hex2dec(hexInput.value)
  console.log(`${n} -> ${n.toString(16)}` );
}

// Source: https://stackoverflow.com/questions/5055723/converting-hexadecimal-to-float-in-javascript/5055821#5055821
function hex2dec(hex) {
    hex = hex.split(/\./);
    var len = hex[1].length;
    hex[1] = parseInt(hex[1], 16);
    hex[1] *= Math.pow(16, -len);
    return parseInt(hex[0], 16) + hex[1];
}

Put some 5-digit (or less) hexdecimal number in range 0-1<br>
<input id="hexInput" value="0.2D4EE">
<button onclick="calc()">Calc</button>

Ich habe bereits zwei Antworten auf Ihre Frage gegeben, ohne diese Annahme: RGB y hexadezimal Daher werde ich in dieser Antwort keine weitere Lösung einfügen.

Answer 5

var html = '';
var red;
var green;
var blue;
var rgbColor;

for ( var i = 1; i <= 100; i += 1) {
  red = Math.floor(Math.random() * 256 );
  green = Math.floor(Math.random() * 256 );
  blue = Math.floor(Math.random() * 256 );
  rgbColor = 'rgb(' + red + ',' + green + ',' + blue + ')';
  html += '<div style="background-color:' + rgbColor + '"></div>';  
}

document.write(html);