使用从数组中提取的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();

哪个应该画一个深紫色的圆圈，但是无论我如何尝试，我都无法获取context.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

我对调色板阵列进行了更改，并以字符串而不是对象的形式定义了颜色。 现在，每次页面加载时，您都会在定义的调色板颜色中出现带有随机颜色的圆圈。

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

请找到更新的小提琴 。