使用從陣列中取得的RGB顏色進行繪圖

我正在嘗試使用Javascript繪製徽標，並且我需要從固定調色板中選擇隨機顏色。使用從陣列中取得的RGB顏色進行繪圖

我已經建立了調色板作爲一個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

我是新來這樣的事情。我只是在這裏得到了錯誤的語法，或者我吠叫了錯誤的樹？

在此先感謝您的幫助......

來源

2017-01-18 Richard Holt

如果DarkColours [0]包含「45,10,55」，您可以使用： contxt.strokeStyle =「rgba（」+ DarkColours [0] +「，1）」; – iguypouf

每次調用該函數時，都需要用不同的顏色繪製圓圈？或頁面已加載，或者您希望該圓圈一次具有不同的顏色 –

試試這個

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

來源

2017-01-18 11:35:43 naortor

完美！謝謝！ –

我已經改變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。

來源

2017-01-18 11:59:56

使用從陣列中取得的RGB顏色進行繪圖

回答

相關問題