HTML5和JS实现新年礼花效果

HTML5和JS实现新年礼花效果

2023兔年再见,2024龙年来临了!

祝愿读者朋友们在2024年里,身体健康,心灵愉悦,梦想成真。

下面是用HTML5和JS实现新年礼花效果:

源码如下:

javascript 复制代码
<!DOCTYPE html>
<html>
<head>
    <title>新年礼花</title>
    <style>
        /* 设置画布占满整个窗口 */
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <!-- 创建一个画布 -->
    <canvas id="fireworksCanvas"></canvas>

    <script>
        // 获取canvas和context
        const canvas = document.getElementById('fireworksCanvas');
        const ctx = canvas.getContext('2d');
        // 设置canvas宽高为窗口的宽高
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        // 初始化烟花数组
        let fireworks = [];

        // 定义产生min到max之间的随机数的函数
        function random(min, max) {
            return Math.random() * (max - min) + min;
        }

        // 定义烟花类
        class Firework {
            constructor(x, y, color) {
                this.x = x;
                this.y = y;
                this.particles = [];
                this.exploded = false;
                this.life = 0;
                this.color = color;
                this.explodeHeight = random(canvas.height * 0.3, canvas.height * 0.6);
            }

            // 更新烟花状态的方法
            update() {
                // 如果烟花还未爆炸,向上移动,并增加寿命
                if (!this.exploded) {
                    this.y -= random(5, 10);
                    this.life += 1;
                    // 如果烟花达到或超过爆炸高度,爆炸
                    if (this.y <= this.explodeHeight) {
                        this.explode();
                    }
                } else {
                    // 如果烟花已经爆炸,更新和绘制粒子
                    this.particles.forEach((particle, index) => {
                        particle.update();
                        if (particle.life < 0) {
                            this.particles.splice(index, 1);
                        }
                    });
                }
            }

            // 绘制烟花的方法
            draw() {
                if (!this.exploded) {
                    ctx.fillStyle = this.color;
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, 2, 0, Math.PI * 2);
                    ctx.fill();
                } else {
                    this.particles.forEach((particle) => particle.draw());
                }
            }

            // 烟花爆炸的方法
            explode() {
                this.exploded = true;
                for (let i = 0; i < 100; i++) {
                    const angle = random(0, Math.PI * 2);
                    const speed = random(1, 4);
                    this.particles.push(new Particle(this.x, this.y, angle, speed, this.color));
                }
            }
        }

        // 定义粒子类
        class Particle {
            constructor(x, y, angle, speed, color) {
                this.x = x;
                this.y = y;
                this.angle = angle;
                this.speed = speed;
                this.life = random(50, 100);
                this.color = color;
            }

            // 更新粒子状态的方法
            update() {
                this.x += Math.cos(this.angle) * this.speed;
                this.y += Math.sin(this.angle) * this.speed;
                this.speed *= 0.99;
                this.life -= 1;
            }

            // 绘制粒子的方法
            draw() {
                ctx.fillStyle = this.color + ', ' + (this.life / 100) + ')';
                ctx.beginPath();
                ctx.arc(this.x, this.y, 2, 0, Math.PI * 2);
                ctx.fill();
            }
        }

        // 动画函数
        function animate() {
            // 绘制背景
            ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            // 以5%的概率添加新烟花
            if (Math.random() < 0.05) {
                const x = random(0, canvas.width);
                const y = canvas.height;
                const fireworkColor = 'hsla(' + random(0, 360) + ', 100%, 50%';
                fireworks.push(new Firework(x, y, fireworkColor));
            }

            // 更新和绘制烟花
            for (let i = fireworks.length - 1; i >= 0; i--) {
                fireworks[i].update();
                fireworks[i].draw();
                if (fireworks[i].exploded && fireworks[i].particles.length === 0) {
                    fireworks.splice(i, 1);
                }
            }

            // 显示文字
            ctx.font = "50px Arial";
            ctx.fillStyle = "pink";
            ctx.textAlign = "center";
            ctx.fillText("2024年龙年快乐", canvas.width / 2, canvas.height / 2);
            
            // 继续下一帧动画
            requestAnimationFrame(animate);
        }

        // 启动动画
        animate();

        // 监听窗口大小变化,重新设置画布大小
        window.addEventListener('resize', function() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        });

    </script>
</body>
</html>

OK!

相关推荐
真的很上进42 分钟前
如何借助 Babel+TS+ESLint 构建现代 JS 工程环境?
java·前端·javascript·css·react.js·vue·html
噢,我明白了4 小时前
同源策略:为什么XMLHttpRequest不能跨域请求资源?
javascript·跨域
sanguine__4 小时前
APIs-day2
javascript·css·css3
关你西红柿子5 小时前
小程序app封装公用顶部筛选区uv-drop-down
前端·javascript·vue.js·小程序·uv
济南小草根5 小时前
把一个Vue项目的页面打包后再另一个项目中使用
前端·javascript·vue.js
小木_.5 小时前
【python 逆向分析某有道翻译】分析有道翻译公开的密文内容,webpack类型,全程扣代码,最后实现接口调用翻译,仅供学习参考
javascript·python·学习·webpack·分享·逆向分析
Aphasia3115 小时前
一次搞懂 JS 对象转换,从此告别类型错误!
javascript·面试
m0_748256566 小时前
Vue - axios的使用
前端·javascript·vue.js
m0_748256346 小时前
QWebChannel实现与JS的交互
java·javascript·交互
胡西风_foxww6 小时前
【es6复习笔记】函数参数的默认值(6)
javascript·笔记·es6·参数·函数·默认值