canvas实现粒子流光动画效果代码-html代码-BFW代码库

canvas实现粒子流光动画效果代码

代码语言：html

所属分类：粒子

代码描述：canvas实现粒子流光动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>

<head>
    <meta charset="utf-8">

    <style>
        body,html{position:absolute;margin:0;padding:0;width:100%;height:100%;overflow:hidden;}canvas{position:absolute;width:100%;height:100%;background:#000;cursor:pointer;}
    </style>
</head>

<body>
    <div></div>
    <script>
        {
        class Particle {
            constructor() {
                this.damp = 0.00002;
                this.accel = 100;
                this.init();
            }
            init() {
                this.x = Math.random() * canvas.width;
                this.y = Math.random() * canvas.height;
                this.vx = this.accel * (Math.random() - Math.random());
                this.vy = this.accel * (Math.random() - Math.random());
            }
            step() {
                for (const a of attractors) {
                    const dx = a.x - this.x;
                    const dy = a.y - this.y;
                    const d2 = dx * dx + dy * dy;
                    if (d2 > 0.1) {
                        this.vx += this.accel * dx / d2;
                        this.vy += this.accel * dy / d2;
                    }
                }
                this.x += this.vx;
                this.y += this.vy;
                this.vx *= this.damp;
                this.vy *= this.damp;
                ctx.fillRect(this.x, this.y, 0.5, 0.5);
            }
        }
        const canvas = {
            init() {
                this.........完整代码请登录后点击上方下载按钮下载查看