5

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

4

7 回答 7

11

这取决于你想要什么样的云。您可以尝试在游戏开发者中非常流行的Perlin 噪声。

于 2010-07-05T03:40:49.663 回答
4

您可以使用 SVG feTurbulence 过滤器原语来生成 Perlin 噪声，该噪声可用于创建类似云的纹理。

一些帮助和示例：

Inkscape矢量图形编辑器还拥有大量预定义的 svg 过滤器，请参阅此处以在某些文本上仅使用其中的几个过滤器的示例。“噪声填充”使用的是 feTurbulence，可能很容易调整。Inkscape 还有一个用于调整每个过滤器参数的 GUI，选择任何形状，然后在菜单中选择“过滤器 > 过滤器编辑器...”。

于 2010-07-05T08:09:18.260 回答
3

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

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

祝你画得愉快，愿上帝保佑我的朋友。

于 2010-07-05T05:21:43.593 回答
2

这是使用 Silverlight 完成的 Perlin 噪声示例：http: //kodierer.blogspot.com/2009/05/oscar-algorithm-silverlight-real-time.html

它可能是您可以使用和/或适应的东西。

于 2010-07-05T03:43:49.047 回答
0

如果在画布中实现并且您想要蓬松的云形状而不是噪声类型，我会说绘制一个随机长度的矩形，然后首先将不同大小的圆圈添加到侧面，然后再添加到顶部以获得云效果。您必须做一些数学运算以确保云没有显示在矩形下方，并且矩形的顶部没有任何直线部分。但是在画布中实现应该不难。

于 2010-07-05T04:35:32.060 回答
0

这段代码在一系列颜色中制作了一堆圆圈，也许它会帮助你处理云

    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();
       }
     }
于 2010-07-09T14:49:59.657 回答
0

生成一组气泡（圆形或水平椭圆）并为每个云计算形状的并集。

于 2010-07-09T14:55:02.113 回答