canvas粒子碰撞运动特效-html代码-BFW代码库

canvas粒子碰撞运动特效

代码语言：html

所属分类：粒子

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <script>
        window.requestAnimFrame = (function() {
            return (
                window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                function(callback) {
                    window.setTimeout(callback);
                }
            );
        });

        function init(elemid) {
            let canvas = document.getElementById(elemid),
            c = canvas.getContext("2d"),
            w = (canvas.width = window.innerWidth),
            h = (canvas.height = window.innerHeight);
            c.fillStyle = "rgba(30,30,30,1)";
            c.fillRect(0, 0, w, h);
            return {
                c: c,
                canvas: canvas
            };
        }
    </script>
    <style>
        body,
        html {
            margin: 0px;
            padding: 0px;
            position: fixed;
            background: rgb(30,30,30);
            filter: contrast(3);
        }

        canvas {
            filter: blur(3px);
        }
    </style>

</head>
<body translate="no">
    <canvas id="canvas"></canvas>

    <script>
        window.onload = function () {
            let c = init("canvas").c,
            canvas = init("canvas").canvas,
            w = canvas.width = window.innerWidth,
            h = canvas.height = window.innerHeight,
            mouse = {
                x: w / 2,
                y: h / 2
            },
            last_mouse = {};

            //initiation

            function dist(p1, p2) {
                return Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));
            }

            class particle {
                constructor() {
                    this.a = Math.random() * 2 * Math.PI;
                    this.r = Math.random() * 50;
                    this.x0 = w / 2 + this.r * Math.cos(this.a);
                    this.y0 = h / 2 + this.r * Math.sin(this.a);
                    this.ang = Math.random() * (2 * Math.PI);
                    this.col = "white";
                    this.s = 10;
                    this.g = G;
                }
                hit(arr) {
                    this.f0 = this.f;
                    for (let i = 0; i < arr.length; i++) {
                        if (dist(this, arr[i]) < this.s + arr[i].s) {
                            this.f -= this.f0 + arr[i].f;
                        }
                    }
                }
                move() {
                    this.vx += this.ax * t;
                    this.vy += this.ay * t;

                    this.vx *= friction;
                    this.vy *= friction;

                    this.x += this.vx * t;
                    this.y += this.vy * t;

                    this.ax = 0;
                    this.ay = 0;
                    this.f = 0;
                }
                edges() {
                    if (this.x <= this.s) {
                        this.x = 0;
                        this.vx *= -friction;
                    }
                    if (this.x >= w - this.s) {
                        this.x = w;
                        this.vx *= -friction;
                    }
                    if (this.y >= h - this.s) {
                        this.y = h;
                        this.vy *= -friction;
                    }
                    if (this.y <= this.s) {
                        this.y = 0;
                        this.vy *= -friction;
                    }
                }
                show() {
                    c.beginPath();
                    //c.arc(this.x,this.y,this.s,0,2*Math.PI);
                    c.rect(this.x, this.y, this.s, this.s);
                    c.fillStyle = this.col;
                    c.fill();
                }}


            class rp extends particle {
                constructor() {
                    super();
                    this.col = cols[0];
                    this.f = 10;
                    this.ax = this.f * Math.cos(this.ang);
                    this.ay = this.f * Math.sin(this.ang);
                    this.vx = this.f * Math.cos(this.ang);
                    this.vy = this.f * Math.sin(this.ang);
                    this.x = this.x0;
                    this.y = this.y0;
                }
                connect(arr, d) {
                    for (let i = 0; i < arr.length; i++) {
                        if (this != arr[i]) {
                            if (arr[i].col == cols[0]) {
                                this.f = this.g * (this.s * arr[i].s / Math.pow(dist(this, arr[i]), 2));
                            }
                            if (arr[i].col == cols[1]) {
                                this.f = this.g * (this.s * arr[i].s / Math.pow(dist(this, arr[i]), 2));
                            }
                            if (arr[i].col == cols[2]) {
                                this.f = -fdif * this.g * (this.s * arr[i].s / Math.pow(dist(this, arr[i]), 2));
                            }
                            this.ang = Math.atan2(arr[i].y - this.y, arr[i].x - this.x);
                            if (this.f > 50) {
                                this.f = 50;
                            }
                            this.ax += this.f * Math.cos(this.ang);
                            this.ay += this.f * Math.sin(this.ang);
                        }
                    }
                }}


            class gp extends particle {
                constructor() {
                    super();
                    this.col = cols[1];
                    this.f = 10;
                    this.ax = this.f * Math.cos(this.ang);
                    this.ay = this.f * Math.sin(.........完整代码请登录后点击上方下载按钮下载查看