HTML5 Canvas 细菌感染 | 星系繁衍动画模拟

也可以用来模拟苔藓/海藻/珊瑚类植物的生长。

html5, galaxy

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2966
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

class Galaxy {
    constructor() {
        var c = document.getElementById('canvas');
        var ctx = c.getContext('2d');

c.width = window.innerWidth * 2;
        c.height = window.innerHeight * 2;

this.c = c;
        this.ctx = ctx;

this.tick = 0;

this.createStars();

this.drawBg();

for (var i = 0; i < 500; i++) {
            this.draw(false);
        }
        this.draw(true);
    }

draw(drawAgain) {
        this.tick += 1;
        this.drawStars();

if (drawAgain) {
            window.requestAnimationFrame(() => {
                this.draw(true);
            });
        }
    }

drawBg() {
        this.ctx.rect(0, 0, this.c.width, this.c.height);
        this.ctx.fillStyle = 'black';
        this.ctx.fill();
    }

createStars() {
        this.stars = [];

for (var i = 0; i < 500; i++) {
            this.stars.push({
                x: this.c.width * Math.random(),
                y: this.c.height * Math.random(),
                r: Math.random(),
                vX: (Math.random() > .5) ? Math.random() : -Math.random(),
                vY: (Math.random() > .5) ? Math.random() : -Math.random(),
                vC: Math.max(parseInt(Math.random() * 10), 1)
            });

console.log(this.stars[i].vC);
        }
    }

drawStars() {
        for (var i = 0; i < this.stars.length; i++) {
            var star = this.stars[i];

this.ctx.beginPath();
            this.ctx.arc(star.x, star.y, star.r, 0, Math.PI * 2);
            this.ctx.fillStyle = 'white';
            this.ctx.fill();
            this.ctx.closePath();

this.moveStar(i);
        }
    }

moveStar(i) {
        var star = this.stars[i];

if (this.tick % 6 == 1) {
            star.vX = (Math.random() > .5) ? Math.random() : -Math.random();
            star.vY = (Math.random() > .5) ? Math.random() : -Math.random();
        }

if (star.x > this.c.width) {
            star.x = -1;
        } else {
            star.x += star.vX * 2;
        }

if (star.y > this.c.height) {
            star.y = -1;
        } else {
            star.y += star.vY * 2;
        }
    }

}

new Galaxy();

编译

CSS

HTML

也可以用来模拟苔藓/海藻/珊瑚类植物的生长。

html5, galaxy

编辑器支持Emmet

快捷键

也可以用来模拟苔藓/海藻/珊瑚类植物的生长。

html5, galaxy

HTML5 Canvas 很棒的水平面模拟动画

HTML5 Canvas沙丁鱼群游动模拟

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：