<画布>3 种颜色的渐变淡入淡出
我一直在尝试 HTML5 和渐变淡入淡出，我想使用 3 种颜色并逐渐将它们淡入彼此。目前我只能使用两种颜色让它工作。
我的目标类似于此图片：
颜色应该慢慢地相互淡入，我对当前正在使用的淡入淡出效果感到满意，尽管我想添加第三种颜色。
我尝试添加要使用的颜色数组，但颜色函数是从教程中修改的（如果我能找到，将添加链接），并且不太确定如何操作。
有人可以提供任何建议吗？
提前致谢。
我并不是想让它看起来与图像完全相同，但如果我可以在当前版本中添加另一种颜色，那应该没问题。
编辑：由于混乱：我不是在寻找“静态”渐变，如果您仔细查看我的示例，您会看到轻微的淡入淡出效果。我想实现相同的效果，但具有 3 种颜色的渐变，并且看起来与上图类似。
它应该“闪烁”并逐渐褪色。提供赏金，因为我正在努力用 3 种颜色来创建这个，我认为这对大多数人来说都很容易。
I have been experimenting with HTML5 and gradient fades, I would like to use 3 colours and gradually fade them into each other. Currently I can only get it working using two colours.
My target is something similar to this image:
The colours should slowly fade into each other, i'm happy with the fade effect I currently have working, although would like to add a third colour.
I have tried to add an array of the colours to use, but the colour function was modded from a tutorial (will add link if I can find) and am not quite sure how to do it.
Could anyone offer any adivce?
Thanks in advance.
Am not trying to get it looking exactly the same as the image, but if I could just add another colour to my current version that should be fine.
Edit: Due to the confusion: I'm not looking for a "static" graident, if you view my example closely you will see a suttle fade effect. I want to achieve the same effect, but have the gradient with 3 colours and looking similar to the image above.
It should "shimmer" and a gradually fade. Offering a bounty as I'm struggling with creating this with 3 colours, which I think will be easy for most..
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
除非您需要做一些复杂的动画，否则您会为渐变进行一些极其不必要的计算。梯度的要点是你给它一些种子值，它会自动生成介于两者之间的所有值。
我制作了一个与您的参考图像类似的示例渐变： http://jsfiddle.net/ZFayC/2/
请注意，您的参考图像看起来可能有少量纹理，并且渐变绝对不是线性的。如果您想重新创建参考图像，则必须使用一些径向渐变并可能覆盖纹理。
另请注意，您是通过 CSS 属性设置画布
width和height。对于canvas 元素，CSSwidth和height控制元素的放大，而DOM 级属性控制实际尺寸。编辑：我完全忽略了您想要生成动画渐变的事实。我对此表示歉意。
我返回并编辑了我的示例，以在与参考图像中的颜色相似的三种预定义颜色之间平滑过渡。您可以在此处查看更新的示例：
http://jsfiddle.net/fkU4Q/
这更符合实际情况吗您正在寻找什么？
编辑：这是另一个更新，添加了全屏支持、对角渐变和叠加在中间的辅助径向渐变，以帮助提供一些变化：
http://jsfiddle.net/fkU4Q/2/
您可能想要更多地自定义颜色以增加变化，但希望功能是现在就在那里。
Unless you need to do some complex animation, you were doing some extremely unnecessary calculations for your gradient. The point of the gradient is that you give it some seed values and it generates everything in between automatically.
I worked up a sample gradient that looks similar to your reference image: http://jsfiddle.net/ZFayC/2/
Note that it looks like your reference image might have a small amount of texture to it, and that the gradient definitely isn't linear. If you want to re-create the reference image, you'll have to use some radial gradients and possibly overlay a texture.
Also, note that you were setting the canvas
widthandheightvia CSS properties. With the canvas element, CSSwidthandheightcontrol the magnification of the element, while DOM-level attributes control the actual dimensions.Edit: I completely missed the fact that you were looking to produce an animated gradient. My apologies for that.
I went back and edited my example to smoothly transition between three pre-defined colors similar to the ones in your reference image. You can view the updated example here:
http://jsfiddle.net/fkU4Q/
Is this more along the lines of what you're looking for?
Edit: Here's another update that adds full-screen support, a diagonal gradient, and a secondary radial gradient that is overlaid in the middle to help give some variety:
http://jsfiddle.net/fkU4Q/2/
You might want to customize the colors a bit more to increase the variation, but hopefully the functionality is there now.
我认为通过应用某些技巧，使用 CSS3 属性应该不是什么大问题，这里是游乐场，
http://css3.mikeplate .com/
I think by applying certain tricks it should not be a big deal using CSS3 properties here is the playground,
http://css3.mikeplate.com/