Javascript <；帆布>；渐变淡入3种颜色

我一直在尝试HTML5和渐变淡入，我想使用3种颜色，并逐渐淡入彼此。目前，我只能使用两种颜色使其工作

我的目标与此图像类似：

颜色应该慢慢地相互淡入，我对我目前正在使用的淡入效果很满意，不过我想添加第三种颜色

我曾尝试添加一系列的颜色来使用，但颜色功能是从一个教程中修改的（如果我能找到，将添加链接），我不太确定如何做到这一点

有人能提供一些建议吗

提前谢谢

我不想让它看起来完全一样的形象，但如果我可以添加另一种颜色，我现在的版本应该是罚款

编辑：由于混淆：我不是在寻找“静态”凹痕，如果您仔细查看我的示例，您将看到suttle淡入淡出效果。我想达到同样的效果，但有3种颜色的梯度，看起来像上面的图像

---

它应该“闪烁”并逐渐褪色。提供悬赏，因为我正在努力用3种颜色制作这个游戏，我认为这对大多数人来说都很容易。

我认为通过应用某些技巧，使用CSS3属性应该不是什么大问题这里是游乐场

---

除非你需要做一些复杂的动画，否则你是在为你的渐变做一些非常不必要的计算。渐变的要点是，你给它一些种子值，它会自动生成中间的所有内容

我制作了一个与参考图像相似的渐变示例：

请注意，它看起来像你的参考图像可能有少量的纹理，而且梯度肯定不是线性的。如果要重新创建参考图像，必须使用一些径向渐变，并可能覆盖纹理

另外，请注意，您正在通过CSS属性设置画布的宽度和高度。对于canvas元素，CSS

width

和

height

控制元素的放大率，而DOM级属性控制实际尺寸

---

编辑：我完全忽略了您希望生成动画渐变的事实。对此我深表歉意

我返回并编辑了我的示例，以便在三种预定义颜色之间平滑过渡，这三种颜色与参考图像中的颜色相似。您可以在此处查看更新的示例：

这更符合你的要求吗

---

<强>编辑：这是另一个更新，它添加了全屏支持、对角线梯度和叠加在中间的辅助径向梯度，以帮助给出一些变化：

---

您可能希望更多地自定义颜色以增加变化，但希望功能现在就在那里。

等等。。。您是在

中执行此操作的，而不是使用HTML5/CSS3“线性渐变”背景样式。。。这就是你喜欢的吗？我希望它能在尽可能多的浏览器中工作，并且使用ex canvas我希望能增加对IE的支持。在HTML5/CSS3中有没有可能在淡入淡出的情况下实现类似的效果？好吧，检查一下渐变生成器站点-它为IE提供了一些规定，并且它提供了看起来非常可移植的CSS。（实际上，对于较旧的IE浏览器，它似乎无法真正做到这一点，因为只有旧的变换“过滤器”属性。）@c69问题是如何使这些颜色相互褪色？嗨，谢谢，它看起来不错。虽然我的主要问题是让颜色彼此褪色，就像我的演示一样？谢谢。@Elliott我不太明白你在找什么。我的例子中的颜色会相互褪色。我遗漏了什么吗？淡入淡出是静态的，如果你看我的例子，你会看到颜色彼此淡入淡出。这就是为什么我有所有额外的代码。谢谢。@Elliott啊，我道歉。不知何故，我完全忽略了你例子中微妙的颜色波动。我觉得你应该能够通过只动态更新颜色值和保持停止位置不变来实现你想要的。这将使您的代码更清晰、更直接。例如，

color1

切换到

color2

，

color2

切换到

color3

，

color3

切换到

color1

（等等，循环进行）。我尝试过这样做，它似乎“跳跃”了，并不像目前那样平滑-现在提供了一笔赏金。