最近在實現https://javascript30.com/的課程，其中有一門課程要求利用Canvas實現一個效果，我發現這個效果其中的顏色是線性生成的。結合我之前已經寫過一個隨機顏色生成器，就想將這個隨機顏色生成器寫出來，作為一個工具使用，雖然實際應用場景不大，就當練練手了。

本示例中使用了大量的Generator，在寫的過程發現ES6所提供的Generator在這個場景中非常適用。可以參考學習。

本工具已經上傳至NPM，詳細介紹了使用方法與注意事項，請移步至：random-color-generator2
1.2.0 版本現已支持HSL算法，線性輸出更平穩。

隨機生成一個顏色

在瀏覽器中這么使用:

// 生成隨機色const pointer = rcg2.generateColor(false);const color = pointer.next().value;

我的示例中使用了300個顏色塊，所以顏色呈現上圖效果。

返回線性遞增顏色

在瀏覽器中這么使用:

// 生成線性色, 步長為5const pointer = rcg2.generateColor(true, 5);const color = pointer.next().value;

我的示例中使用了300個顏色塊，所以顏色呈現上圖效果。

And (Use HSL algorithm. 😃 Be better! 😃)

HSL算法為360個單位一周期。

HSL采用單次遞增1個單位的效果:

HSL采用單次遞增2個單位的效果:

文本示例:

IndexColor

0	‘#ff0000’
1	‘#ff1100’
2	‘#ff2200’
3	‘#ff3300’
4	‘#ff4400’

HSL算法說明圖:

如有疑問，可以參見項目中的index.html示例文件。

對generateColor方法及顏色模板的說明

generateColor方法有兩個參數.

• 參數1，類型為boolean值，表示是否開啟線性輸出。
• 參數2，類型為整型，表示線性輸出情況下顏色的增量區間。例如這個值傳入3，在第一個值為#00FF00的情況下，第二個值就為03FF00，以此類推。

顏色模板的排列組合為: XXFF00 XX00FF FFXX00 FF00XX 00XXFF 00FFXX，目前從這6個中循環取模板，后期將支持自定義模板。

分治算法求排列組合

在實現線性遞增的過程中，需要了解情況線性顏色的變化方式，在觀察了ADOBE對于顏色的變化方式之后，知道需要有一個模板的排列組合。雖然這里需要的只有6種，不用多長時間就可以窮舉出來，但是我還是想通過分治的方法將所有的可能列出來。

實現代碼如下：

// 分治算法計算所有的顏色模板值 function generateColorTemplate(array) {// 出口if (array.length === 1)return array;const resultArray = [];for (let index = 0; index < array.length; index++) {const firstEle = array[index];const shadow = array.slice();shadow.splice(array.indexOf(firstEle), 1);const temp = generateColorTemplate(shadow);// 組合for (let indexJ = 0; indexJ < temp.length; indexJ++) {const secondEle = temp[indexJ];resultArray.push(`${firstEle}${secondEle}`);}}return resultArray; }

測試方式如下：

// test.js const { generateColorTemplate } = require('./src/index.js');const result = generateColorTemplate(['A', 'B', 'C', 'D', 'E']);console.info(result.join(' '), result.length);

對于5個元素的排列組合為: 5的階層, 也就是 5 x 4 x 3 x 2 x 1 = 120.
最終的結果經過多輪測試是正確的:

ABCDE ABCED ABDCE ABDEC ABECD ABEDC ACBDE ACBED ACDBE ACDEB ACEBD ACEDB ADB CE ADBEC ADCBE ADCEB ADEBC ADECB AEBCD AEBDC AECBD AECDB AEDBC AEDCB BACDE BACED BADCE BADEC BAECD BAEDC BCADE BCAED BCDAE BCDEA BCEAD BCEDA BDACE BDA EC BDCAE BDCEA BDEAC BDECA BEACD BEADC BECAD BECDA BEDAC BEDCA CABDE CABED CADBE CADEB CAEBD CAEDB CBADE CBAED CBDAE CBDEA CBEAD CBEDA CDABE CDAEB CDB AE CDBEA CDEAB CDEBA CEABD CEADB CEBAD CEBDA CEDAB CEDBA DABCE DABEC DACBE DACEB DAEBC DAECB DBACE DBAEC DBCAE DBCEA DBEAC DBECA DCABE DCAEB DCBAE DCB EA DCEAB DCEBA DEABC DEACB DEBAC DEBCA DECAB DECBA EABCD EABDC EACBD EACDB EADBC EADCB EBACD EBADC EBCAD EBCDA EBDAC EBDCA ECABD ECADB ECBAD ECBDA ECD AB ECDBA EDABC EDACB EDBAC EDBCA EDCAB EDCBA 120

對于這種場景使用分治算法求排列組合非常合適。

---

代碼已經上傳Github，地址為：Random Color Generator
這個工具已上傳NPM，地址為：random-color-generator2

TODOLIST:

• 支持顏色模板可配置. 例如支持XXFFFF/XX0000/FFXXFF…
• 支持步長可配置. 支持單次遞增變化值: 1 ~ 255
• 支持顏色隨機范圍可配置. 例如支持100 ~ 150的顏色范圍區間
• 支持遞減

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的随机/线性颜色生成器（RandomColorGenerator）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。