<canvas>渐变淡化3种颜色

Question

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

我的目标与此图像类似:

目标图像

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

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

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

提前致谢.

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

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

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

Answer 1

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

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

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

另请注意,您正在设置画布width并height通过CSS属性.使用canvas元素,CSS width并height控制元素的放大,而DOM级属性控制实际尺寸.

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

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

这更像是你想要的吗？

编辑:这是另一个更新,增加了全屏支持,对角梯度,并且在中间帮忙给一些品种覆盖二级径向渐变:

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