菜单 搜索
首页 前端知识 HTML5和JS实现新年礼花效果

HTML5和JS实现新年礼花效果

2024-03-06 09:03:25 前端知识 前端哥 643 275 我要收藏

HTML5和JS实现新年礼花效果

2023兔年再见，2024龙年来临了！

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

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

源码如下：

<!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>
复制

修改1：加入新年贺词文字，让文字居中从下往往滚动，效果如下：

源码如下：

<!DOCTYPE html>
<html>
<head>
<title>新年礼花</title>
<style>
/* 设置画布占满整个窗口 */
body {
margin: 0;
padding: 0;
overflow: hidden;
}
canvas {
display: block;
}
.scrolling-text {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
font-size: 24px;
text-align: center;
color: red;
animation: scrollText 10s linear infinite;
}
 
    @keyframes scrollText {
        0% {
            top: 100%;
        }
        100% {
            top: -100%;
        }
    }
</style>
</head>
<body>
<!-- 创建一个画布 -->
<canvas id="fireworksCanvas"></canvas>
<div class="scrolling-text">
<p>《元日》</p>
<p>宋·王安石</p>
<p>爆竹声中一岁除，</p>
<p>春风送暖入屠苏。</p>
<p>千门万户曈曈日，</p>
<p>总把新桃换旧符。</p>
</div>
 
<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>
复制

修改2：加入背景音乐，确保将音乐文件（我这里命名为"background_music.mp3"）与HTML文件放在同一目录中。音乐控制按钮应该能够显示在左上角了。效果如下：

源码如下：

<!DOCTYPE html>
<html>
<head>
    <title>新年礼花</title>
    <style>
        /* 设置画布占满整个窗口 */
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        canvas {
            display: block;
        }
        .scrolling-text {
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            font-size: 24px;
            text-align: center;
            color: red;
            animation: scrollText 10s linear infinite;
        }
        
        @keyframes scrollText {
            0% {
                top: 100%;
            }
            100% {
                top: -100%;
            }
        }
        .button-container {
            position: absolute;
            top: 10px;
            left: 10px;
        }
        .button-container button {
            padding: 10px 20px;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <!-- 创建一个画布 -->
    <canvas id="fireworksCanvas"></canvas>
    <div class="scrolling-text">
        <p>《元日》</p>
        <p>宋·王安石</p>
        <p>爆竹声中一岁除，</p>
        <p>春风送暖入屠苏。</p>
        <p>千门万户曈曈日，</p>
        <p>总把新桃换旧符。</p>
    </div>
    <div class="button-container">
        <button id="playButton">播放音乐</button>
    </div>
 
    <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;
        });
 
        // 播放音乐的按钮点击事件
        const playButton = document.getElementById('playButton');
        const bgm = new Audio('background_music.mp3');
        playButton.addEventListener('click', function() {
            if (bgm.paused) {
                bgm.play();
                playButton.textContent = '暂停音乐';
            } else {
                bgm.pause();
                playButton.textContent = '播放音乐';
            }
        });
 
    </script>
</body>
</html>
复制

OK！

转载请注明出处或者链接地址：https://www.qianduange.cn//article/3291.html
标签
上一篇：HTML基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

前端使用jquery传递对象数组给后端说明及总结

2024-03-27 10:03:30

jQuery实现轮播图

2024-02-26 20:02:24

CSS伪元素详解以及伪元素与伪类的区别

2024-03-27 10:03:20

原生Img图片标签图片自适应缩放且不变形

2024-03-27 10:03:14

响应式布局的五种方法

2024-03-27 10:03:14

使用CSS3实现围绕圆心旋转

2024-03-27 10:03:14

html css简单实现九宫格布局，自适应屏幕

2024-03-27 10:03:11

window.onscroll 当页面滚动条、滚动到指定位置时触发

2024-03-27 10:03:11

前端实现3D旋转木马相册

2024-03-27 10:03:07

VScode cssrem插件的安装和使用指南

2024-03-27 10:03:07

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000
2

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
3

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
4

移动端css布局大全

2024-02-06 15:02:421000
5

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
6

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
7

echarts 图表，定时器实现数据实时动态

2024-03-13 00:03:28999
8

jQuery事件处理

2024-03-12 01:03:32999
9

HTML5实现下拉列表的标签有哪些

2024-03-11 10:03:35999
10

成都工业学院Web技术基础（WEB）实验一：HTML5排版标签使用

2024-02-27 11:02:41999

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！