最近在實(shí)現(xiàn)https://javascript30.com/的課程，其中有一門課程要求利用Canvas實(shí)現(xiàn)一個(gè)效果，我發(fā)現(xiàn)這個(gè)效果其中的顏色是線性生成的。結(jié)合我之前已經(jīng)寫過(guò)一個(gè)隨機(jī)顏色生成器，就想將這個(gè)隨機(jī)顏色生成器寫出來(lái)，作為一個(gè)工具使用，雖然實(shí)際應(yīng)用場(chǎng)景不大，就當(dāng)練練手了。

本示例中使用了大量的Generator，在寫的過(guò)程發(fā)現(xiàn)ES6所提供的Generator在這個(gè)場(chǎng)景中非常適用。可以參考學(xué)習(xí)。

本工具已經(jīng)上傳至NPM，詳細(xì)介紹了使用方法與注意事項(xiàng)，請(qǐng)移步至：random-color-generator2
1.2.0 版本現(xiàn)已支持HSL算法，線性輸出更平穩(wěn)。

隨機(jī)生成一個(gè)顏色

在瀏覽器中這么使用:

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

我的示例中使用了300個(gè)顏色塊，所以顏色呈現(xiàn)上圖效果。

返回線性遞增顏色

在瀏覽器中這么使用:

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

我的示例中使用了300個(gè)顏色塊，所以顏色呈現(xiàn)上圖效果。

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

HSL算法為360個(gè)單位一周期。

HSL采用單次遞增1個(gè)單位的效果:

HSL采用單次遞增2個(gè)單位的效果:

文本示例:

IndexColor

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

HSL算法說(shuō)明圖:

如有疑問(wèn)，可以參見(jiàn)項(xiàng)目中的index.html示例文件。

對(duì)generateColor方法及顏色模板的說(shuō)明

generateColor方法有兩個(gè)參數(shù).

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

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

分治算法求排列組合

在實(shí)現(xiàn)線性遞增的過(guò)程中，需要了解情況線性顏色的變化方式，在觀察了ADOBE對(duì)于顏色的變化方式之后，知道需要有一個(gè)模板的排列組合。雖然這里需要的只有6種，不用多長(zhǎng)時(shí)間就可以窮舉出來(lái)，但是我還是想通過(guò)分治的方法將所有的可能列出來(lái)。

實(shí)現(xiàn)代碼如下：

// 分治算法計(jì)算所有的顏色模板值 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; }

測(cè)試方式如下：

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

對(duì)于5個(gè)元素的排列組合為: 5的階層, 也就是 5 x 4 x 3 x 2 x 1 = 120.
最終的結(jié)果經(jīng)過(guò)多輪測(cè)試是正確的:

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

對(duì)于這種場(chǎng)景使用分治算法求排列組合非常合適。

---

代碼已經(jīng)上傳Github，地址為：Random Color Generator
這個(gè)工具已上傳NPM，地址為：random-color-generator2

TODOLIST:

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

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。