canvas实现炫酷2026新年烟花绽放粒子动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：粒子

代码描述：canvas实现炫酷2026新年烟花绽放粒子动画效果代码

代码标签： canvas 炫酷 2026 新年烟花绽放粒子动画

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        @import url("https://fonts.googleapis.com/css2?family=Gabarito:wght@900&display=swap");
        body {
        margin: 0;
        overflow: hidden;
        background-color: #141414;
        }
        .overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 100;
        }
    </style>
</head>

<body translate="no">
    <script>
        window.canvasOptions = {
        //- autoClear: true,
        autoCompensate: false,
        autoPushPop: true,
        canvas: true,
        //- centered: true,
        desynchronized: false,
        width: null,
        height: null,
        drawAndStop: false
        };
    </script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/simplex-noise.js"></script>
    <script>
        const {
        E, LN10, LN2, LOG10E, LOG2E, PI, SQRT1_2, SQRT2,
        abs, acos, acosh, asin, asinh, atan, atan2, atanh, cbrt, ceil, clz32,
        cosh, exp, expm1, floor, fround, hypot, imul, log, log10, log1p, log2, max,
        min, pow, /* random, */round, sign, sinh, sqrt, tan, tanh, trunc } =
        Math;
        
        // Why not?
        const ZERO = 0.0;
        const ONE = 1.0;
        const TWO = 2.0;
        const THREE = 3.0;
        const FOUR = 4.0;
        const FIVE = 5.0;
        const SIX = 6.0;
        const SEVEN = 7.0;
        const EIGHT = 8.0;
        const NINE = 9.0;
        const TEN = 10.0;
        const ELEVEN = 11.0;
        const TWELVE = 12.0;
        const SIXTEEN = 16.0;
        const THIRTY = 30.0;
        const THIRTY_TWO = 32.0;
        const SIXTY = 60.0;
        const HUNDRED = 100.0;
        const THOUSAND = 1000.0;
        const HALF = ONE / TWO;
        const THIRD = ONE / THREE;
        const TWO_THIRDS = THIRD * TWO;
        const QUARTER = ONE / FOUR;
        const THREE_QUARTER = QUARTER * THREE;
        const FIFTH = ONE / FIVE;
        const SIXTH = ONE / SIX;
        const SEVENTH = ONE / SEVEN;
        const EIGHTH = ONE / EIGHT;
        const TWELFTH = ONE / TWELVE;
        const SIXTEENTH = ONE / SIXTEEN;
        const ONE_THIRTIETH = ONE / THIRTY;
        const THIRTY_SECONDTH = ONE / THIRTY_TWO;
        const SIXTIETH = ONE / SIXTY;
        const TENTH = 1e-1;
        const HUNDREDTH = 1e-2;
        const THOUSANDTH = 1e-3;
        const TEN_THOUSANDTH = 1e-4;
        const HUNDRED_THOUSANDTH = 1e-5;
        const MILLIONTH = 1e-6;
        const TEN_MILLIONTH = 1e-7;
        const HUNDRED_MILLIONTH = 1e-8;
        const BILLIONTH = 1e-9;
        const TEN_BILLIONTH = 1e-10;
        const HUNDRED_BILLIONTH = 1e-11;
        const HALF_PI = PI * HALF;
        const THREE_QUARTER_PI = PI * THREE_QUARTER;
        const THIRD_PI = PI * THIRD;
        const QUARTER_PI = PI * QUARTER;
        const FIFTH_PI = PI * FIFTH;
        const SIXTH_PI = PI * SIXTH;
        const SEVENTH_PI = PI * SEVENTH;
        const EIGHTH_PI = PI * EIGHTH;
        const TWELFTH_PI = PI * TWELFTH;
        const SIXTEENTH_PI = PI * SIXTEENTH;
        const THIRTY_SECONDTH_PI = PI * THIRTY_SECONDTH;
        const TAU = PI * TWO;
        const TWO_TAU = TAU * TWO;
        const THREE_QUARTER_TAU = TAU * THREE_QUARTER;
        const HALF_TAU = PI;
        const THIRD_TAU = TAU * THIRD;
        const QUARTER_TAU = HALF_PI;
        const FIFTH_TAU = TAU * FIFTH;
        const SIXTH_TAU = THIRD_PI;
        const EIGHTH_TAU = QUARTER_PI;
        const TWELFTH_TAU = SIXTH_PI;
        const SIXTEENTH_TAU = EIGHTH_PI;
        const THIRTY_SECONDTH_TAU = SIXTEENTH_PI;
        const SQRT_3 = sqrt(THREE);
        const SQRT_4 = sqrt(FOUR);
        const SQRT_5 = sqrt(FIVE);
        const PHI = (1 + sqrt(5)) * 0.5;
        const GOLDEN_ANGLE = 1 / (PHI * PHI);
        const FPS_30 = 1000 / 30;
        const FPS_60 = 1000 / 60;
        const FPS_120 = 1000 / 120;
        const FPS_144 = 1000 / 144;
        const FPS_165 = 1000 / 165;
        const FPS_170 = 1000 / 170;
        const COLOR_BLACK = hsl(0, 0, 0);
        const COLOR_WHITE = hsl(0, 0, 100);
        const COLOR_RED = hsl(0, 100, 50);
        const COLOR_ORANGE = hsl(30, 100, 50);
        const COLOR_YELLOW = hsl(60, 100, 50);
        const COLOR_GREEN = hsl(120, 100, 50);
        const COLOR_CYAN = hsl(180, 100, 50);
        const COLOR_FAVORITE = hsl(210, 100, 50);
        const COLOR_BLUE = hsl(240, 100, 50);
        const COLOR_PURPLE = hsl(280, 100, 50);
        const COLOR_MAGENTA = hsl(300, 100, 50);
        const TEXTALIGN_LEFT = 'left';
        const TEXTALIGN_CENTER = 'center';
        const TEXTALIGN_RIGHT = 'right';
        const TEXTBASELINE_TOP = 'top';
        const TEXTBASELINE_MIDDLE = 'middle';
        const TEXTBASELINE_BOTTOM = 'bottom';
        let _defaulCanvasOptions = {
        autoClear: false,
        autoCompensate: true,
        autoPushPop: false,
        canvas: true,
        centered: false,
        desynchronized: false,
        width: null,
        height: null,
        drawAndStop: false };
        let _canvasOptions = {};
        let canvas = document.getElementById('canvas');
        if (canvas === null) {
        canvas = document.createElement('canvas');
        canvas.id = 'canvas';
        document.body.appendChild(canvas);
        }
        let ctx = canvas.getContext('2d', {
        desynchronized: window.canvasOptions && window.canvasOptions.desynchronized !== undefined ?
        window.canvasOptions.desynchronized : _defaulCanvasOptions.desynchronized
        // preserveDrawingBuffer: true // WebGL
        });
        const _originalCtx = ctx;
        let _anim, _lastCanvasTime, canvasFrameDelta, canvasFrameRate, frameCount, width, height, width_half, height_half, width_quarter, height_quarter, canvasSize;
        let _canvasCurrentlyCentered = false;
        let _logMouseEvents = false;
        let _mouseUpdateTimeThreshold = 12;
        let mouseUpdate = -Infinity,mouseIn = false,mouseDown = false,mouseButton = -1,
        mouseMove = null,mousePos = null,mousePosPrev = null,
        mouseDownTime = -Infinity,mouseDownPos = null,
        mouseEnterPos = null,mouseExitPos = null,
        mouseUpTime = -Infinity,mouseUpPos = null,
        mouseEnterTime = -Infinity,mouseExitTime = -Infinity;
        function updateMouse(e, eventName) {// Modified from p5.js
        if (_logMouseEvents) {
        console.log('Mouse event', eventName, e);
        }
        if (e && !e.clientX) {
        e = e.touches && e.touches.length ? e.touches[0] : e.changedTouches ? e.changedTouches[0] : e;
        }
        if (!e) {
        if (_logMouseEvents) {
        console.log('Missing event data');
        }
        return;
        }
        const _mouseUpdate = e.timeStamp === undefined ? performance.now() : e.timeStamp;
        if (mouseUpdate > 0 && _mouseUpdate - mouseUpdate < _mouseUpdateTimeThreshold) {
        if (_logMouseEvents) {
        // https://nolanlawson.com/2019/08/11/high-performance-input-handling-on-the-web/
        // https://bugs.chromium.org/p/chromium/issues/detail?id=992954
        // http://event-timing.glitch.me/
        console.log('Skipping mouse event, are the dev tools open?');
        }
        return;
        }
        mouseUpdate = _mouseUpdate;
        let rect = canvas.getBoundingClientRect();
        let sx = canvas.scrollWidth / width;
        let sy = canvas.scrollHeight / height;
        let x = (e.clientX - rect.left) / sx;
        let y = (e.clientY - rect.top) / sy;
        if (x < 0) x = 0;else
        if (x > width) x = width;
        if (y < 0) y = 0;else
        if (y > height) y = height;
        if (mousePos) {
        mousePosPrev.set(mousePos);
        mousePos.set(x, y);
        }
        // return { x, y, winX: e.clientX, winY: e.clientY, id: e.identifier };
        }
        canvas.addEventListener('mouseenter', e => {
        updateMouse(e, 'mouseenter');
        mouseIn = true;
        mouseEnterTime = e.timeStamp;
        // mouseExitTime = -Infinity;
        });
        canvas.addEventListener('mouseleave', e => {
        updateMouse(e, 'mouseleave');
        mouseIn = mouseDown = false;
        // mouseEnterTime = -Infinity;
        mouseExitTime = e.timeStamp;
        });
        canvas.addEventListener('mousemove', e => {
        updateMouse(e, 'mousemove');
        mouseIn = true;
        mouseMove = e.timeStamp;
        });
        canvas.addEventListener('mousedown', e => {
        updateMouse(e, 'mousedown');
        mouseIn = mouseDown = true;
        mouseButton = e.button;
        mouseDownTime = e.timeStamp;
        mouseDownPos = mousePos.copy();
        });
        canvas.addEventListener('mouseup', e => {
        updateMouse(e, 'mouseup');
        mouseDown = false;
        mouseButton = e.button;
        mouseUpTime = e.timeStamp;
        mouseUpPos = mousePos.copy();
 .........完整代码请登录后点击上方下载按钮下载查看