同时生成具有不同设置的粒子 HTML5答案

【问题标题】：Generate Particles with different Settings at the same time HTML5同时生成具有不同设置的粒子 HTML5
【发布时间】：2016-05-21 14:37:16
【问题描述】：

首先，我不仅在 HTML5 或 Canvas 中是新的，而且在整个编码过程中都是新的。我使用了这个示例 http://rectangleworld.com/demos/DustySphere/DustySphere.html 并尝试以我可以根据需要使用它的方式对其进行修改。

目前看起来像 this.

code is on codepen

现在我尝试组合不同的设置并同时生成 2 个不同的粒子动画。例如：2050 和 2070 上的粒子应该出现在 2090 上。这个问题有什么简单的解决方案吗？我感谢每一个帮助。

【问题讨论】：

标签： javascript html animation canvas particles

【解决方案1】：

使用函数绘制具有不同设置的粒子

由于您是编码新手，我想知道您是否知道functions。

function 是可重用的代码块。
您可以发送arguments 以获取要使用的功能。
参数可以使函数在执行其代码时应用不同的设置。

这是一个使用单个 function 的简单示例，它接受不同的参数来绘制具有不同设置的粒子。

通常，您可以通过创建一个接受参数的函数来绘制不同的设置来应用不同的设置。这样您就可以使用不同的设置多次调用同一个函数。

// draw a small red circle at [x=50,y=50] with full alpha
drawParticle(50,50,10,'red',1.00);

// draw a large green circle at [x=150,y=100] with half alpha
drawParticle(150,100,50,'green',0.50);

function drawParticle(cx,cy,radius,color,alpha){
    ctx.beginPath();
    ctx.arc(cx,cy,radius,0,Math.PI*2);
    ctx.fillStyle=color;
    ctx.globalAlpha=alpha;
    ctx.fill();
}

对于更复杂的设置，您可以使用if 语句来绘制各种设置

例如，这个函数可以让你绘制一个从 0 到 100 “年龄”的粒子。

将粒子的年龄作为参数传递，该函数使用if 语句在粒子老化时降低粒子的 alpha。

function drawParticle(cx,cy,radius,color,age){
    ctx.beginPath();
    ctx.arc(cx,cy,radius,0,Math.PI*2);
    ctx.fillStyle=color;
    if(age<25){
        ctx.globalAlpha=1.00;
    }else if(age<50){
        ctx.globalAlpha=.75;
    }else if(age<75){
        ctx.globalAlpha=.50;
    }else{
        ctx.globalAlpha=.25;
    }
    ctx.fill();
}

【讨论】：