同时生成不同设置的粒子HTML5

Question

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

目前看来 this.

code is on codepen

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

Answer 1

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

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

A 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 语句来绘制各种设置

例如，此函数可让您绘制一个 "ages" 从 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();
}

同时生成不同设置的粒子HTML5

Generate Particles with different Settings at the same time HTML5

html

javascript

animation

canvas

particles