随机/线性颜色生成器(RandomColorGenerator)

最近在实现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’
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值