<canvas> 渐变淡出效果，使用三种颜色

Question

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

jsFiddle

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

颜色应该慢慢地淡入彼此之间，我对当前的渐变效果感到满意，尽管想添加第三种颜色。我尝试添加一个颜色数组来使用，但是颜色函数是从教程修改而来的（如果我能找到链接就会添加），不太确定如何做。有人能提供任何建议吗？谢谢您的帮助。我不想让它看起来和图片完全一样，但如果我只能在当前版本中添加另一种颜色，那应该没问题。编辑：由于混淆：我不是在寻找“静态”的渐变，如果您仔细查看我的示例，您将看到微妙的渐变效果。我想实现相同的效果，但使用三种颜色的渐变，并且看起来类似于上面的图片。它应该“闪烁”并逐渐消失。我正在提供赏金，因为我正在努力用三种颜色创建这个效果，我认为这对大多数人来说都很容易。

- Elliott

---

这可能会有所帮助。 (http://www.colorzilla.com/gradient-editor/) - Pointy

我希望它能在尽可能多的浏览器中运行，并且使用ex-canvas，我希望为IE添加支持。在HTML5/CSS3中是否可以使用淡入淡出实现类似的效果？ - Elliott

@c69问题是如何使这些颜色彼此褪色？ - Elliott

@Elliott 如果是这样，您可能需要为两种颜色提供一个可工作的代码片段，至少一个。 - c69

如果您点击提供的 jsFiddle ^，代码确实有效。需要几秒钟才能看到效果。 - Elliott

Answer 1

除非需要进行一些复杂的动画，否则您对于渐变效果进行了一些极其不必要的计算。渐变的重点在于您给它一些种子值，它会自动生成中间的所有内容。

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

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

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

---

编辑： 我完全错过了您要创建动态渐变的事实。对此我深表歉意。

我回去编辑了我的示例，使其平滑地在三个预定义颜色之间进行过渡，这些颜色与您参考图像中的颜色类似。您可以在此处查看更新后的示例：

http://jsfiddle.net/fkU4Q/

这更符合您的要求吗？

---

编辑： 这里是另一个更新，增加了全屏支持、对角线渐变和一个次级径向渐变，覆盖在中间以增加一些多样性：

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

您可能需要自定义颜色以增加变化，但希望现在具有功能性。

- Xenethyl

---

嗨，谢谢你，看起来很不错。虽然我的主要问题是让颜色像我的演示一样淡入淡出？谢谢。 - Elliott

淡入淡出是静态的，如果您看我的示例，您会看到颜色彼此淡入淡出。这就是为什么我有所有额外的代码。谢谢。 - Elliott

@Elliott 啊，非常抱歉。我不知怎么错过了你示例中微妙的颜色变化。我觉得你应该能够通过动态更新颜色值并保持停止位置不变来实现你想要的效果。这将使您的代码更加清晰简洁。例如，color1 转移到 color2，color2 转移到 color3，color3 转移到 color1（以此类推，在循环中）。 - Xenethyl

我已经尝试过那样做了，但它似乎会“跳跃”，并且不像现在这样流畅 - 现在提供赏金。 - Elliott

@Elliott 不用谢，也谢谢你！关于税务逻辑，我是在暗示你的网站上可能有些东西与背景动画配合使用时会影响性能。JS 本质上是一个大型事件队列，所以当你每秒触发 10 次动画时，它很快就会拖慢事情。你的代码本质上执行了与我的相同任务——逐步调整颜色。当我说你做了不必要的计算时，我没有意识到有动画参与。我认为你并没有那么远。 :) - Xenethyl

Answer 2

我认为通过应用一些技巧，在这里使用CSS3属性不是什么大问题，以下是游乐场：

http://css3.mikeplate.com/

- defau1t