HTML实现网页烟花

小小九天
于 2024-10-03 16:53:22 发布
阅读量247
点赞数 7
文章标签： html 前端 javascript
本文链接：https://blog.csdn.net/as1278/article/details/142693487
版权
烟花
<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            padding: 0;
            margin: 0;
        }

        canvas {
            display: block;
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
</body>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        var canvas = document.getElementById('canvas');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        var ctx = canvas.getContext('2d');

        // resize
        window.addEventListener('resize', function () {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            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);
            return `rgb(${r}, ${g}, ${b})`;
        }

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

        loop();

        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 j = 0; j < fireNumber * 5; j++) {
                        var firework = {
                            x: fire.x,
                            y: fire.y,
                            size: Math.random() + 1.5,
                            fill: color,
                            vx: Math.random() * 5 - 2.5,
                            vy: Math.random() * -5 + 1.5,
                            ay: 0.05,
                            alpha: 1,
                            life: Math.round(Math.random() * range / 2) + range / 2
                        };
                        firework.base = {
                            life: firework.life,
                            size: firework.size
                        };
                        listFirework.push(firework);
                    }
                    // reset
                    fire.y = fire.base.y;
                    fire.x = fire.base.x;
                    fire.vx = fire.base.vx;
                    fire.ax = Math.random() * 0.02 - 0.01;
                }
                //
                fire.x += fire.vx;
                fire.y += fire.vy;
                fire.vx += fire.ax;
            }

            for (var i = listFirework.length - 1; i >= 0; i--) {
                var firework = listFirework[i];
                if (firework) {
                    firework.x += firework.vx;
                    firework.y += firework.vy;
                    firework.vy += firework.ay;
                    firework.alpha = firework.life / firework.base.life;
                    firework.size = firework.alpha * firework.base.size;
                    firework.alpha = firework.alpha > 0.6 ? 1 : firework.alpha;
                    //
                    firework.life--;
                    if (firework.life <= 0) {
                        listFirework.splice(i, 1);
                    }
                }
            }
        }

        function draw() {
            // clear
            ctx.globalCompositeOperation = 'source-over';
            ctx.globalAlpha = 0.18;
            ctx.fillStyle = '#000';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            // re-draw
            ctx.globalCompositeOperation = 'screen';
            ctx.globalAlpha = 1;
            for (var i = 0; i < listFire.length; i++) {
                var fire = listFire[i];
                ctx.beginPath();
                ctx.arc(fire.x, fire.y, fire.size, 0, Math.PI * 2);
                ctx.closePath();
                ctx.fillStyle = fire.fill;
                ctx.fill();
            }

            for (var i = 0; i < listFirework.length; i++) {
                var firework = listFirework[i];
                ctx.globalAlpha = firework.alpha;
                ctx.beginPath();
                ctx.arc(firework.x, firework.y, firework.size, 0, Math.PI * 2);
                ctx.closePath();
                ctx.fillStyle = firework.fill;
                ctx.fill();
            }
        }
    });
</script>

</html>
预览 | 下载
烟花下载
感谢各位的阅读，更多文章请前往九天小窝。