礼花燃放粒子动画效果-html代码-BFW代码库

礼花燃放粒子动画效果

代码语言：html

所属分类：粒子

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

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

    <style>
        body: {
            padding: 0;
        }

        canvas {
            display: block;
        }
    </style>

</head>
<body translate="no">
    <canvas id="canvas"></canvas>
    <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script>
        $(function () {
            var canvas = $('#canvas')[0];
            canvas.width = $(window).width();
            canvas.height = $(window).height();
            var ctx = canvas.getContext('2d');

            // resize
            $(window).on('resize', function () {
                canvas.width = $(window).width();
                canvas.height = $(window).height();
                ctx.fillStyle = '#000';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
            });

            // init
            ctx.fillStyle = '#000';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            // objects
            var listFire = [];
            var listFirework = [];
            var fireNumber = 10;
            var center = {
                x: canvas.width / 2, y: canvas.height / 2
            };
            var range = 100;
            for (var i = 0; i < fireNumber; i++) {
                var fire = {
                    x: Math.random() * range / 2 - range / 4 + center.x,
                    y: Math.random() * range * 2 + canvas.height,
                    size: Math.random() + 0.5,
                    fill: '#fd1',
                    vx: Math.random() - 0.5,
                    vy: -(Math.random() + 4),
                    ax: Math.random() * 0.02 - 0.01,
                    far: Math.random() * range + (center.y - range)
                };

                fire.base = {
                    x: fire.x,
                    y: fire.y,
                    vx: fire.vx
                };

                //
                listFire.push(fire);
            }

            function randColor() {
                var r = Math.floor(Math.random() * 256);
                var g = Math.floor(Math.random() * 256);
                var b = Math.floor(Math.random() * 256);
                var color = 'rgb($r, $g, $b)';
                color = color.replace('$r', r);
                color = color.replace('$g', g);
                color = color.replace('$b', b);
                return color;
            }

            (function loop() {
                requestAnimationFrame(loop);
                update();
                draw();
            })();

            function update() {
                for (var i = 0; i < listFire.length; i++) {
                    var fire = listFire[i];
                    //
                    if (fire.y <= fire.far) {
                        // case add firework
                        var color = randColor();
                        for (var i = 0; i < fireNumber * 5; i++) {
                            var firework = {
                  .........完整代码请登录后点击上方下载按钮下载查看