Рисование с цветами RGB, взятыми из массива

Question

Я пытаюсь нарисовать логотип с помощью Javascript, и мне нужно выбрать случайный цвет из фиксированной палитры.

Я установил цветовую палитру как массив значений RGB, а затем я использую случайное число, чтобы выбрать один из цветов из массива.

Я хотел бы использовать результат как цвет круга, нарисованного с помощью дуги холста.

Таким образом, это код, который я до сих пор ...

// 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(); 

Который должен нарисовать темно-фиолетовый круг, но независимо от того, что я стараюсь, я не был в состоянии получить контекст. strokeStyle, чтобы принять значения цвета из массива. Он просто черным.

Вот как это выглядит со значениями цвета, вставленные вручную: http://codepen.io/RichardHolt/pen/mRRbpR

Я новичок в этом роде. Я просто получаю синтаксис здесь неправильно, или я лаяю неправильное дерево?

Заранее спасибо за любую помощь ...

Answer 1

попробовать этот

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

или сделать его более удобным для чтения, как

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

`

Answer 2

Я внес изменения в цвете pallate array и определенные цвета в виде строки, а не объекта. Теперь при загрузке каждой страницы вы получаете круг со случайным цветом в определенных цветах цвета 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(); 

Обновлено fiddle.