如何创建一组配色方案，然后随机 select 一个 JavaScript

Question

我试图在每次加载页面时从一组预定义的配色方案中随机加载一个配色方案。希望我的编码尝试是不言自明的，但我的方法是创建一个名为 'colourSchemes' 的数组，用 3 种配色方案填充它（键值对定义构成方案的 3 种颜色），然后将选定的配色方案存储在变量中。

然后我尝试将所选方案中的颜色分配给对象的 fillStyle。不幸的是我画了一个空白（字面意思）。任何帮助，将不胜感激。片段：

//define colour schemes
var colourSchemes = [];
colourSchemes.colourScheme_1 = {colour_1 : "#84FFC9", colour_2 : "#AAB2FF", colour_3 : "#ECA0FF"};
colourSchemes.colourScheme_2 = {colour_1 : "#540D6E", colour_2 : "#EE4266", colour_3 : "#FFD23F"};
colourSchemes.colourScheme_3 = {colour_1 : "#FFBA49", colour_2 : "#20A39E", colour_3 : "#EF5B5B"};

//random colour scheme selected on load
var active_colourScheme = colourSchemes[Math.floor(Math.random() * colourSchemes.length)];

//background colour
ctx.fillStyle = active_colourScheme.colour_1;
ctx.fillRect(0, 0, canvasW, canvasH);

Answer 1

这就是现在用值填充 Array 的方式。在您的情况下，您可以在数组声明期间将值放入数组中：

const colourScheme_1 = {colour_1 : "#84FFC9", colour_2 : "#AAB2FF", colour_3 : "#ECA0FF"};
const colourScheme_2 = {colour_1 : "#540D6E", colour_2 : "#EE4266", colour_3 : "#FFD23F"};
const colourScheme_3 = {colour_1 : "#FFBA49", colour_2 : "#20A39E", colour_3 : "#EF5B5B"};
const colourSchemes = [colourScheme_1, colourScheme_2, colourScheme_3];

//random colour scheme selected on load
const active_colourScheme = colourSchemes[Math.floor(Math.random() * colourSchemes.length)];
console.log(active_colourScheme);

.as-console-wrapper { max-height: 100% !important; top: 0; }

或者 push() 将值放入数组中。如果您想稍后在数组声明后向数组添加值，则此方法有效。

const colourSchemes = [];
const colourScheme_1 = {colour_1 : "#84FFC9", colour_2 : "#AAB2FF", colour_3 : "#ECA0FF"};
const colourScheme_2 = {colour_1 : "#540D6E", colour_2 : "#EE4266", colour_3 : "#FFD23F"};
const colourScheme_3 = {colour_1 : "#FFBA49", colour_2 : "#20A39E", colour_3 : "#EF5B5B"};
colourSchemes.push(colourScheme_1, colourScheme_2, colourScheme_3)

//random colour scheme selected on load
const active_colourScheme = colourSchemes[Math.floor(Math.random() * colourSchemes.length)];
console.log(active_colourScheme);

.as-console-wrapper { max-height: 100% !important; top: 0; }

I would recommend you read the article on Array which I have linked here (and above), so you see how you can use arrays properly in JavaScript.

如何创建一组配色方案，然后随机 select 一个 JavaScript

How do I create an array of colour schemes and then randomly select one with JavaScript

javascript

arrays

random

variables