彩蛋飞舞跟随动画效果-html代码-BFW代码库

彩蛋飞舞跟随动画效果

代码语言：html

所属分类：粒子

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

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

    <style>
        body {
            background-color: black;
        }

        div {
            color: white;
            font-family: tahoma;

        }
    </style>

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

    <canvas id="world"></canvas>
  <script>
                (function () {
                    var COLORS, Confetti, NUM_CONFETTI, PI_2, canvas, confetti, context, drawCircle, i, range, resizeWindow, xpos;

                    NUM_CONFETTI = 350;

                    COLORS = [[85, 71, 106], [174, 61, 99], [219, 56, 83], [244, 92, 68], [248, 182, 70]];

                    PI_2 = 2 * Math.PI;

                    canvas = document.getElementById("world");

                    context = canvas.getContext("2d");

                    window.w = window.innerWidth;

                    window.h = window.innerHeight;

                    resizeWindow = function () {
                        window.w = canvas.width = window.innerWidth;
                        return window.h = canvas.height = window.innerHeight;
                    };

                    window.addEventListener('resize', resizeWindow, false);

                    window.onload = function () {
                        return setTimeout(resizeWindow, 0);
                    };

                    range = function (a, b) {
                        return (b - a) * Math.random() + a;
                    };

                    drawCircle = function (x, y, r, style) {
                        context.beginPath();
                        context.arc(x, y, r, 0, PI_2, false);
                        context.fillStyle = style;
                        return context.fill();
                    };

                    xpos = 0.5;

                    document.onmousemove = function (e) {
                        return xpos = e.pageX / w;
                    };

                    window.requestAnimationFrame = function () {
                        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
                            return window.setTimeout(callback, 1000 / 60);
                        };
                    }();

                    Confetti = class Confetti {
                        constructor() {
                            this.style = COLORS[~~range(0, 5)];
                            this.rgb = `rgba(${this.style[0]},${this.style[1]},${this.style[2]}`;
                       .........完整代码请登录后点击上方下载按钮下载查看