Zeichnen mit RGB-Farben aus einem Array

Question

Ich versuche, ein Logo mit Javascript zu zeichnen, und ich muss eine zufällige Farbe aus einer festen Palette wählen.

Ich habe die Farbpalette als ein Array von RGB-Werten eingerichtet, und dann verwende ich eine Zufallszahl, um eine der Farben aus dem Array auszuwählen.

Ich möchte das Ergebnis als die Farbe eines Kreises verwenden, der mit einem Leinwandbogen gezeichnet wird.

Also, das ist der Code, den ich bisher habe ...

// Define colour palette 

var DarkColourPalette = [ 
{ r:45, g:10, b:55 }, // Dark purple 
{ r:70, g:10, b:40 }, // Dark plum 
{ r:0, g:5, b:70 }, // Dark blue 
{ r:45, g:45, b:55 }, // Dark grey 
{ r:50, g:40, b:40 }, // Dark brown 
{ r:0, g:45, b:30 } // Dark green 
]; 
var DarkColours = DarkColourPalette.concat(); 

// Draw O 

    contxt.beginPath(); 
    contxt.arc(75, 40, 10, 0, 2 * Math.PI, false); 
    contxt.lineWidth = 10; 
    contxt.strokeStyle = "rgba(DarkColours[0],1)"; 
    contxt.stroke(); 

die einen dunklen lila Kreis ziehen sollten, aber egal was ich versuche, habe ich nicht in der Lage gewesen, den Kontext zu erhalten. strokeStyle-Bit zum Akzeptieren der Farbwerte aus dem Array. Es verwendet nur Schwarz. http://codepen.io/RichardHolt/pen/mRRbpR

Ich bin neu in dieser Art der Sache: manuell eingefügt

Hier ist, wie es mit den Farbwerten aussieht. Bekomme ich hier nur die Syntax falsch oder belle ich den falschen Baum an?

Vielen Dank im Voraus für jede Hilfe ...

Answer 1

versuchen, diese

contxt.strokeStyle = "rgba("+DarkColourPalette[0]["r"]+","+DarkColourPalette[0]["g"]+","+DarkColourPalette[0]["b"]+",1)"; 

oder es besser lesbar wie

"rgba(R,G,B,1)" 
       .replace("R",DarkColourPalette[2].r) 
       .replace("G",DarkColourPalette[2].g) 
       .replace("B",DarkColourPalette[2].b); 

`

Answer 2

Ich habe Änderungen in Farbe machen pallate Array und definierte Farben in Form von String statt Objekt. Jetzt jedes Mal, wenn die Seite geladen wird, erhalten Sie einen Kreis mit zufälliger Farbe in definierten Farben der Farbe pallate.

// Define colour palette 

var DarkColourPalette = [ 
"rgba(45,10,55,1)", // Dark purple 
"rgba(70,10,40,1)", // Dark plum 
"rgba(0,5,70,1)", // Dark blue 
"rgba(45,45,55,1)", // Dark grey 
"rgba(50,40,40,1)", // Dark brown 
"rgba(0,45,30,1)" //Dark Green 
]; 
var DarkColours = DarkColourPalette.concat(); 

var canvas = document.getElementById('iON'); 
var contxt = canvas.getContext('2d'); 

contxt.scale (4,4); 

// Draw O 

contxt.beginPath(); 
contxt.arc(75, 40, 10, 0, 2 * Math.PI, false); 
contxt.lineWidth = 10; 
var index = Math.floor(Math.random() * 5) + 1; // If you want to generate random number between 0-6 
console.log(DarkColourPalette[index]); 
contxt.strokeStyle = DarkColourPalette[index]; 
contxt.stroke(); 

Bitte finden fiddle aktualisiert.