<canvas>渐变淡化3种颜色</canvas>

Question

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

jsFiddle

我的目标与此图像类似：

颜色应该慢慢淡入对方，我对我目前工作的淡化效果感到满意，虽然想添加第三种颜色。

我尝试添加要使用的颜色数组，但颜色函数是从教程中修改的（如果我能找到则会添加链接）并且我不太确定该怎么做。

有人可以提供任何adivce吗？

提前致谢。

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

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

它应该“闪烁”并逐渐消失。提供赏金，因为我正在努力创造3种颜色，我认为这对大多数人来说很容易..

Answer 1

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

我制作了一个类似于参考图像的样本渐变：http://jsfiddle.net/ZFayC/2/

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

另请注意，您通过CSS属性设置了画布width和height。使用canvas元素，CSS width和height控制元素的放大，而DOM级属性控制实际尺寸。

---

编辑：我完全错过了您希望制作动画渐变的事实。我为此道歉。

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

http://jsfiddle.net/fkU4Q/

这更符合您的要求吗？

---

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

http://jsfiddle.net/fkU4Q/2/

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

Answer 2

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

http://css3.mikeplate.com/