Question

我需要一种算法来绘制云，或者像云一样的形状。显然，我不希望它们都相似我应该用什么来生成相关的X，Y坐标系列来绘制云？我将在SVG或Canvas中实现它

Answer 1

这取决于你想要的是什么样的云。您可以尝试Perlin noise，它非常受游戏开发者欢迎。

Answer 2

您可以使用SVG feTurbulence滤镜原语生成Perlin噪音，可用于创建类似云的纹理。

一些帮助和示例：

Inkscape矢量图形编辑器还有大量预定义的svg过滤器，here仅针对某些文本使用其中一些example。 “噪音填充”是使用feTurbulence，可能很容易调整。 Inkscape还有一个用于调整每个过滤器参数的GUI，选择任何形状，然后在菜单中选择“过滤器＆gt;过滤器编辑器......”。

Answer 3

为了给你的树木朋友，画出许多快乐的小事故。

我推荐画布 - 你可以用画笔疯狂！

我希望你快乐画画，上帝保佑我的朋友。

Answer 4

以下是使用silverlight进行Perlin噪音的示例：http://kodierer.blogspot.com/2009/05/oscar-algorithm-silverlight-real-time.html

这可能是你可以使用和/或适应的东西。

Answer 5

如果在画布中实现并且你希望浮云形状不是噪音类型，我会说画一个随机长度的矩形，然后首先将两个不同大小的圆圈添加到两侧然后到顶部以获得云效果。你必须做一些数学运算来确保云没有显示在矩形下方，并且矩形的顶部没有任何直线部分。但它不应该难以在画布上实现。

Answer 6

这段代码在一组颜色中形成一堆圆圈，也许它可以帮助你使用云

    for (var i = 0; i < 12; i++)
    {
      for (var j = 0; j < 12; j++)
      {
        var ctx = document.getElementById('c1').getContext('2d');
        ctx.strokeStyle = 'rgb(0,' + Math.floor(255 - 42.5 * i) + ',' + 
        Math.floor(255 - 42.5 * j) + ')';
        ctx.beginPath();
        ctx.arc(40 + j * 25, 40 + i * 25, 10, 0, Math.PI * 2, true);
        ctx.stroke();
       }
     }

Answer 7

生成一组气泡（圆形或水平椭圆），并为每个云形成一个形状的联合。

我如何画云？

7 个答案: