<canvas> 渐变渐变 3 种颜色答案

【问题标题】：<canvas> gradient fade with 3 Colours<canvas> 渐变渐变 3 种颜色
【发布时间】：2011-10-05 11:39:13
【问题描述】：

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

我的目标类似于这张图片：

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

我尝试添加要使用的颜色数组，但颜色函数是从教程中修改的（如果我能找到将添加链接）并且不太确定如何操作。

谁能提供任何建议？

提前致谢。

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

编辑：由于混淆：我不是在寻找“静态”渐变，如果您仔细查看我的示例，您会看到渐变效果。我想达到同样的效果，但有 3 种颜色的渐变，看起来与上图相似。

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

【问题讨论】：

This might help.
等等……你是在<canvas>中做的，而不是HTML5/CSS3“线性渐变”背景样式……那是你喜欢的吗？
我希望它可以在尽可能多的浏览器中工作，并且使用前画布我希望添加对 IE 的支持。是否可以在 HTML5/CSS3 中使用淡入淡出做类似的效果？
检查一下渐变生成器站点——它为 IE 提供了一些功能，它为您提供了看起来非常便携的 CSS。（edit 实际上对于较旧的 IE 浏览器，它似乎无法真正做到，只有旧的转换“过滤器”属性。）
@c69 问题是如何让这些颜色相互淡化？

【解决方案1】：

除非您需要制作一些复杂的动画，否则您会为渐变进行一些极其不必要的计算。渐变的关键在于你给它一些种子值，它会自动生成介于两者之间的所有内容。

我制作了一个看起来与您的参考图像相似的示例渐变：http://jsfiddle.net/ZFayC/2/

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

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

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

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

这是否更符合您的要求？

编辑：这是另一个更新，它添加了全屏支持、对角渐变和覆盖在中间的辅助径向渐变以帮助提供一些多样性：

您可能想要更多地自定义颜色以增加变化，但希望现在功能已经存在。

【讨论】：

嗨，谢谢它看起来不错。虽然我的主要问题是让颜色相互褪色，就像我的演示一样？谢谢。
@Elliott 我不太了解您要查找的内容。我的示例中的颜色相互淡入。我错过了什么吗？
淡入淡出是静态的，如果您查看我的示例，您会看到颜色相互淡入淡出。这就是为什么我有所有额外的代码。谢谢。
@Elliott 啊，我很抱歉。我不知何故完全错过了你的例子中微妙的颜色波动。我觉得您应该能够通过仅动态更新颜色值并保持停止位置相同来实现您正在寻找的东西。这将使您的代码更清晰，更直接。例如，color1 转换为 color2，color2 转换为 color3，color3 转换为 color1（等等，循环往复）。
我已经尝试过这样做，但它似乎“跳跃”并且不像现在那么顺利 - 现在提供赏金。

【解决方案2】：

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

【讨论】：