它的名字是: Canvas Particle

代码和效果预览

最初的想法:

在canvas画出随机的点并计算点之间的距离连线

'use strict'

class Ball {
    constructor(x, y, xSpeed, ySpeed) {
        this.x = x;
        this.y = y;
        this.xSpeed = xSpeed;
        this.ySpeed = ySpeed;
     }

     draw() {
         //TODO 画出点
         //TODO 循环这个点与其他点的距离并连线
     }

     update() {
         this.x += this.xSpeed;
        this.y += this.ySpeed;
        this.xSpeed *= (this.x >= canvas.width || this.x <= 0) ? -1 : 1;
        this.ySpeed *= (this.y >= canvas.height || this.y <= 0) ? -1 : 1;
        this.draw();
     }
}

const animate = () => {
    requestAnimationFrame(animate);
    // TODO
}

animate();

实际效果不理想,太卡了. 可能是因为在循环计算距离时会不停的创建对象(待确认).

修改之后:

'use strict'

let dots = [];
for (let i=0; i<200; i++) {
    dots.push({
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,
        xSpeed: getRandomNumber(),
        ySpeed: getRandomNumber(),
        max: 6000
    });
}

const animate = () => {
    requestAnimationFrame(animate);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (let dot of balls) {
        dot.x += dot.xSpeed;
        dot.y += dot.ySpeed;
        dot.xSpeed *= (dot.x >= canvas.width || dot.x <= 0) ? -1 : 1;
        dot.ySpeed *= (dot.y >= canvas.height || dot.y <= 0) ? -1 : 1;
        ctx.fillRect(dot.x - 0.5, dot.y - 0.5, 1, 1);

        for (let dot2 of balls) {
            //TODO 计算距离并画出连线
        }
    }
}

animate();

之后改成了Json对象+函数的形式,效果不错.