有没有一种很好的方法可以使用HTML5 canvas和javascript动态绘制云而不使用图像？

Question

我正在尝试为我的网站创建一个背景，使用画布绘制东西，获取它的数据URL并将其设置为元素的background-image属性。 该方法有效，但我找不到在画布上绘制云的好方法。 其他更简单的东西，如太阳和星星，很容易做到没有图像，我宁愿保持整个脚本没有图像。 在一个点周围绘制多个圆圈可以稍微做一些，但我更愿意采用更现实的方式来做到这一点。 提前致谢。

Answer 1

我刚刚创建了Cloudgen.js，一个为画布生成云的开源库。 我采用的方法使用重叠圆，每个圆都有径向渐变和透明度。 Cloudgen.js提供了一种使用“drawCloud”方法绘制单个云的方法，或使用“drawCloudGroup”一次绘制多个云。 由于云大致呈圆形，因此使用“drawCloudGroup”还可以创建具有更多有趣或预定义形状的单个云。

您可以在https://github.com/Ninjakannon/Cloudgen.js找到Cloudgen.js

Answer 2

好吧，我一直在考虑绘制云的问题，这就是我所处的位置。

HTMLCanvasElement.prototype.makeCloud=function (xLast, yLast, rLast, lLast){
    rLast = (rLast || 50)
    lLast = lLast || Math.random()*25+75;
    var x = (xLast || 250) + Math.random()*(2*rLast)-rLast/1,
        y = (yLast || 250) + Math.random()*(1*rLast)-rLast/1.5,
        r = (rLast) + Math.random()*10-7.5,
        l = (lLast);

    if(x-r < 0)
        x = r+1;
    else if (x+r > this.width)
        x = this.width-r-1;
    if(y-r < 0)
        y = r+1;
    else if (y+r > this.height)
        y = this.height-r-1;
    if(r <= 0)
        return this;
    if(l<0)
        l=0;
    else if(l>100)
        l=100;

    var ctx=this.getContext('2d');
    ctx.fillStyle='hsl(0, 0%, '+l+'%)';
    ctx.beginPath();
    ctx.arc(x, y, r, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.fill();
    if(Math.random < 0.01)
        return this;
    this.makeCloud(x, y, r, l)
    return this;
} 

它会产生一些非常疯狂的东西......任何人都可以想到任何改进吗？ 我知道编辑canvas原型并不是最好的事情，但我的应用程序使用了一些链接，这使它更好地流动。