有没有一种不用图像就可以用 HTML5 画布和 javascript 动态绘制云的好方法?

Posted

技术标签:

【中文标题】有没有一种不用图像就可以用 HTML5 画布和 javascript 动态绘制云的好方法?【英文标题】:Is there a good method for dynamically drawing clouds with HTML5 canvas and javascript without using images? 【发布时间】:2011-06-23 02:39:04 【问题描述】:

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

【问题讨论】:

绝对需要一个示例,说明您认为哪种类型的云是好的云,否则它只会是一场巨大的猜测和检查游戏。你喜欢的一些矢量云的链接会产生奇迹。 【参考方案1】:

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

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

【讨论】:

【参考方案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;
 

它会产生一些非常疯狂的东西......谁能想到任何改进? 我知道编辑画布原型并不是最好的做法,但我的应用程序使用了一些链接,这使它更好地流动。

【讨论】:

制作了一个 JSFiddle 以防其他人提出这个问题并想看看这些云是什么样子:jsfiddle.net/qs8wf 这里有一个快速刺伤 (jsfiddle.net/icodeforlove/qs8wf/22)。我确信这可以扩展到使用路径和更好的限制。

以上是关于有没有一种不用图像就可以用 HTML5 画布和 javascript 动态绘制云的好方法?的主要内容,如果未能解决你的问题,请参考以下文章

HTML5画布:用颜色填充透明图像并在顶部绘制

HTML5 画布大小和分辨率

在 HTML5 画布中剪切多个图像

html5图像旋转缩放并上传

HTML5 Canvas 图像缩放问题

如何使用 html5 画布扭曲图像以创建在风中飘扬的旗帜效果