在CSS / Jquery中创建渐变网格 [英] Creating a gradient mesh in CSS/Jquery

问题描述

我不知道这是否可能，但是我可以使用CSS / Jquery技术来创建一个渐变网格吗？
与此类似的东西

我想随机生成这个网格，然后可能对其进行动画处理，因此我试图避免使用图像。我不知道是否这样的东西是可能的。

我想是可能创建几层单独的渐变，然后将它们一起叠加到一个固定的位置，

解决方案

目前

几年前，我使用SVG，HTML5 canvas标签以及最近的CSS3渐变，尝试了沿着这些线的东西。我不认为目前有一个自然的方式超越简单的线性或径向渐变。

问题是如果网格渐变可以模拟使用简单的线性和径向渐变（这是唯一可用的工具）。

不幸的是，当使用不透明度或rgba组合多个渐变时，不同渐变的颜色倾向于这不是有用的，导致褪色的颜色。避免这种情况需要能够在浏览器中以单个复杂渐变的形式呈现。

渐变可能具有的形状有很大的局限性 - 线性渐变任意角度和具有径向对称性的椭圆梯度。也不允许自由形状，不规则形状。

在未来 >

最近我注意到的最近的选择是可能支持SVG 2.0中的网格渐变（也许扩散曲线）。如果这种情况发生并且最终被浏览器支持，那么应该开始大大扩展选项。

和@vals在下面的注释中指出，WebGL应该提供一些非常有前途的选项（对于HTML5画布标签

相关链接

• http://www.svgopen.org/2011/papers/18-Advanced_Gradients_for_SVG/


• http://w3-org.9356.n7.nabble.com/Diffusion-Curves-td146288.html

I'm not sure if this is possible or not, but can I use CSS/Jquery techniques to create a gradient mesh? Something similar to this

I'd like to randomly generate this mesh and then possibly animate it, so I'm trying to avoid using images. I'm not sure if something like this would even be possible.

I was thinking maybe creating several layers of individual gradients and then layering them all together into a fixed position and changing their opacity settings?

解决方案

At present

I experimented with something along these lines a few years ago, using SVG, the HTML5 canvas tag, and more recently CSS3 gradients. I don't believe there's a natural way to go beyond simple linear or radial gradients at present.

The question is if a mesh gradient can be simulated using only simple linear and radial gradients (which are the only tools available).

Unfortunately, when you combine multiple gradients using opacity or rgba, the colors of the different gradients tend to combine in a way that's not useful, leading to washed-out colors. Avoiding this would require being able to render it in the browser as a single complex gradient.

There are also significant limitations to the shapes the gradients can have -- linear gradients at an arbitrary angle, and elliptical gradients with radial symmetry. Neither allows for free-form, irregular shapes. The 2D transformations that can be applied to the resulting image are fairly regular in nature as well (scaling, skewing, etc).

In the future

The most promising option I'm aware of for the near future is the possible support for mesh gradients in SVG 2.0 (and perhaps diffusion curves as well). If this does happen and it's eventually supported by browsers, that should start to greatly expand the options. And the HTML5 canvas tag and CSS3 may follow soon afterwards.

And as @vals pointed out in the comment below, WebGL should offer some very promising options (for HTML5 canvas tags using a 3D context).

Related links

• http://www.svgopen.org/2011/papers/18-Advanced_Gradients_for_SVG/
• http://w3-org.9356.n7.nabble.com/Diffusion-Curves-td146288.html

这篇关于在CSS / Jquery中创建渐变网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！