做淘客要有好的网站,基于ssh框架的网站开发流程图,360网站免费推广怎么做,哈尔滨做网站巨耀公司最近在实现https://javascript30.com/的课程#xff0c;其中有一门课程要求利用Canvas实现一个效果#xff0c;我发现这个效果其中的颜色是线性生成的。结合我之前已经写过一个随机颜色生成器#xff0c;就想将这个随机颜色生成器写出来#xff0c;作为一个工具使用#x…最近在实现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个单位的效果: 文本示例:
IndexColor0‘#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的颜色范围区间支持递减
