使用从数组中获取的 RGB 颜色进行绘制答案

【问题标题】：Drawing with RGB colours taken from an array使用从数组中获取的 RGB 颜色进行绘制
【发布时间】：2017-06-02 18:21:57
【问题描述】：

我正在尝试使用 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

我是这种事情的新手。我只是在这里弄错了语法还是我叫错了树？

提前感谢您的帮助...

【问题讨论】：

如果 DarkColours[0] 包含 "45,10,55" 你可以使用：contxt.strokeStyle = "rgba(" + DarkColours[0] + ",1)";
每次调用该函数时都需要绘制不同颜色的圆圈吗？或页面已加载，或者您希望该圆圈同时具有不同的颜色

标签： javascript arrays canvas colors rgb

【解决方案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);

【讨论】：

完美！谢谢！

【解决方案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。

【讨论】：