最近在实现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个颜色块,所以颜色呈现上图效果。
返回线性递增颜色
在浏览器中这么使用:
// 生成线性色, 步长为5
const pointer = rcg2.generateColor(true, 5);
const color = pointer.next().value;
我的示例中使用了300个颜色块,所以颜色呈现上图效果。
And (Use HSL algorithm. 😃 Be better! 😃)
HSL算法为360个单位一周期。
HSL采用单次递增1个单位的效果:
HSL采用单次递增2个单位的效果:
文本示例:
Index | Color |
---|---|
0 | ‘#ff0000’ |
1 | ‘#ff1100’ |
2 | ‘#ff2200’ |
3 | ‘#ff3300’ |
4 | ‘#ff4400’ |