特别浅的渐变蓝色在html里,javascript – 渐变色淡淡的3种颜色

我一直在尝试使用HTML5和渐变渐变,我想使用3种颜色并逐渐淡化它们.目前我只能使用两种颜色.

我的目标与此图像类似:

颜色应该慢慢淡入彼此,我很满意我目前工作的淡化效果,虽然想添加第三种颜色.

我试图添加一个颜色数组来使用,但颜色函数是从教程修改(如果我能找到将添加链接),我不太清楚如何做到这一点.

任何人都可以提供任何adivce吗?

提前致谢.

我不是试图让它看起来与图像完全相同,但如果我可以为我当前版本添加另一种颜色应该没问题.

编辑:由于混乱:我不是在寻找一个“静态”的灰色,如果你仔细观察我的例子,你会看到一个褪色效果.我想达到相同的效果,但是有3种颜色的渐变,看起来与上面的图像类似.

它应该“闪烁”并逐渐淡化.提供赏金,因为我正在努力创造3种颜色,我认为这将是最容易的..

解决方法:

除非你需要做一些复杂的动画,否则你正在为渐变做一些非常不必要的计算.渐变的要点是你给它一些种子值,它会自动生成一切.

请注意,看起来您的参考图像可能具有少量纹理,并且渐变绝对不是线性的.如果要重新创建参考图像,则必须使用一些径向渐变并可能覆盖纹理.

另请注意,您是通过CSS属性设置画布宽度和高度.使用canvas元素,CSS宽度和高度控制元素的放大率,而DOM级属性控制实际尺寸.

编辑:我完全错过了你想要制作动画渐变的事实.我为此道歉.

我回去编辑了我的示例,以便在三种预定义颜色之间平滑过渡,类似于参考图像中的颜色.您可以在此处查看更新的示例:

这更像是你想要的吗?

编辑:这是另一个更新,它增加了全屏幕支持,一个对角线渐变,以及一个覆盖在中间的辅助径向渐变,以帮助提供一些变化:

您可能希望稍微自定义颜色以增加变化,但希望功能现在存在.

标签:javascript,gradient,canvas

来源: https://codeday.me/bug/20190721/1495114.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值
>