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

我的目标与此图像类似：

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

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

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

提前致谢.

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

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

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

解决方法:

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

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

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

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

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

这更像是你想要的吗？

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

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

标签：javascript,gradient,canvas