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

请找到更新的fiddle。

用从阵列中取出的RGB颜色绘制

2 个答案: