HTML5生日快乐在线网页祝福 (一场浪漫的烟花秀) HTML+CSS+JavaScript

❤ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业: 【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (125套) 】
七夕来袭!是时候展现专属于程序员的浪漫了!你打算怎么给心爱的人表达爱意?鲜花礼物?代码表白?还是创意DIY?或者…无论那种形式,快来秀我们一脸吧!


📂文章目录

  • 二、📚网站介绍
  • 三、🔗网站效果
    • ▶️1.视频演示
    • 🧩 2.图片演示
  • 四、💒 网站代码
    • 🧱HTML结构代码
    • 🏠JS代码
  • 五、🎁更多源码


二、📚网站介绍

📒网站文件方面:html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件;

📙网页编辑方面:可使用任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。
其中:
(1)📜html文件包含:其中index.html是首页、其他html为二级页面;
(2)📑 css文件包含:css全部页面样式,3D动态效果,雪花飘落等等
(3)📄 js文件包含:页面炫酷效果实现


三、🔗网站效果

▶️1.视频演示

14-html5 canvas生日快乐文字烟花背景动画特效

🧩 2.图片演示

在这里插入图片描述


四、💒 网站代码

🧱HTML结构代码

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>烟火</title><script src="js/jquery.min.js"></script>
<script src="js/canvas.js"></script>
<script src="js/deepCopy.js"></script>
<script src="js/Firework.js"></script></head>
<body><canvas id="canvas" width="500" height="500"></canvas>   <script>
var canvas = $$("canvas"),ctx = canvas.getContext("2d"),g = 0.25,//模拟重力加速度n = 5,//一次性发射的烟火的数量fireworkList = [],//存放所有烟火对象//烟火形状                                                        圆形                                                              椭圆形                                                          爱心形fireworkTypeList = [createCircleFirework, createEllipseFirework, createHeartFirework],totalNum = 0,//发射烟火的总数量surprise_num = 25,//当发射烟火数量达到25时,发射生日快乐字样的烟火flag = true;//是否发射生日快乐字样的烟火
canvas.width = $(window).width() - 15;
canvas.height = $(window).height() - 20;var init = function(firework,params){//初始化一个烟火var beforeBalst = firework.getBeforeBalst();firework.setCtx(ctx);firework.setStatus(1);//状态为点燃引线firework.setNum(100 + Math.floor(20 * Math.random()));//爆炸之后的烟花数量firework.setRoundness(getType(params) == "object" ? (getType(params.roundness) == "number" ? params.roundness : 0.25) : 0.25);//默认的规则度是0.25,这样爆炸的烟花与真实的最像//firework.setFireworkType(getType(params) == "object" ? params.fireworkType : fireworkTypeList[Math.floor(Math.random() * fireworkTypeList.length)]);//从三种形状中随机烟花形状firework.setFireworkType(getType(params) == "object" ? params.fireworkType : createCircleFirework);//默认圆形烟花firework.setDelay(Math.floor(30 * Math.random()));//引线燃烧的时间,单位为帧, 最多30帧,即0.5sbeforeBalst.setAnimate({quiescence : {//发射位置为底部中间x : canvas.width / 2,y : canvas.height,deg : 0,zoom : 1},move : {//发射速度向量vx : -7 + 14 * Math.random(),vy : -22 + 4 * Math.random(),pal : 0,scale : 0},translate : {//发射加速度,有一个为g的重力加速度ax : 0,ay : g,apal : 0,scale : 0}});beforeBalst.setR(3);//烟火半径为3像素beforeBalst.setColor("#FFFFFF");//白色beforeBalst.setLife(50 + Math.floor(Math.random() * 50));//烟花从发射到爆炸的时间,单位为帧,即50-100帧后爆炸beforeBalst.setBase();//记录烟花发射的初始状态
}for(var i = 0; i < n; i++){//初始化n个烟火var firework = Firework.getInstance();init(firework);fireworkList.push(firework);totalNum++;
}var draw = function(){//描绘每一帧烟火的状态//整个canvas充满黑幕,模拟黑夜ctx.globalCompositeOperation = 'source-over';ctx.globalAlpha = 0.2;ctx.fillStyle = '#000003';ctx.fillRect(0, 0, canvas.width, canvas.height);//描绘每个烟火的状态ctx.globalCompositeOperation = 'screen';$.each(fireworkList,function(index,value){value.draw();});};var update = function(){//更新每一帧烟火的状态for(var i = fireworkList.length - 1; i >= 0; i--){fireworkList[i].update();//更新if(fireworkList[i].getStatus() == 5){//烟火消失fireworkList.splice(i,1);//在烟火集合中将这个烟火去除掉if(totalNum < surprise_num){//当发射烟火数量没到25var firework = Firework.getInstance();//继续生成新的烟火init(firework);fireworkList.push(firework);totalNum++;}  if(fireworkList.length == 0 && flag){//发射生日快乐烟火和一箭穿心烟火var firework = Firework.getInstance();init(firework,{fireworkType:createCustomFirework,roundness:1});fireworkList.push(firework);        			var firework2 = Firework.getInstance();init(firework2,{fireworkType:createDoubleHeartFirework,roundness:1});fireworkList.push(firework2);flag = false;}}}
}var loop = function(){draw();update();						requestAnimationFrame(function(){//每秒触发60次的方法,因此动画是60帧的loop();});
};loop();
</script></body>
</html>

🏠JS代码

/*** 获取变量类型*/
function getType(obj){var toString = Object.prototype.toString;var map = {'[object Boolean]'  : 'boolean', '[object Number]'   : 'number', '[object String]'   : 'string', '[object Function]' : 'function', '[object Array]'    : 'array', '[object Date]'     : 'date', '[object RegExp]'   : 'regExp', '[object Undefined]': 'undefined','[object Null]'     : 'null', '[object Object]'   : 'object'};if(obj instanceof Element) {return 'element';}return map[toString.call(obj)];
}/*** 利用递归实现深拷贝*/
function deepCopy(data){var type = getType(data);var obj;if(type === 'array'){obj = [];} else if(type === 'object'){obj = {};} else {//不再具有下一层次return data;}if(type === 'array'){for(var i = 0, len = data.length; i < len; i++){obj.push(deepCopy(data[i]));}} else if(type === 'object'){for(var key in data){obj[key] = deepCopy(data[key]);}}return obj;
}

五、🎁更多源码

1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦!

2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!

📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/70179.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

不用找,你想要的节日 节庆 节气展板展架模板素材都在这里

看到大家都在问节日 节庆 节气展板展架模板素材&#xff0c;既要免费又要质量好&#xff0c;数量还要多&#xff0c;小编好不容易挖到了宝藏素材网站哦&#xff0c;不知道爱给网这个网站大家认识不&#xff0c;资源优质数量庞大&#xff0c;使用体验也很好&#xff0c;要是需要…

CSS 实现灯笼动画,祝大家元旦快乐

前言 &#x1f44f;CSS 实现大红灯笼动画&#xff0c;祝大家元旦快乐&#xff0c;2023越来越棒&#xff01;速速来Get吧~ &#x1f947;文末分享源代码。记得点赞关注收藏&#xff01; 1.实现效果 2.实现步骤 定义一个灯笼的背景色bg&#xff0c;线条颜色lineColor :root …

2023年春节跨年烟花网页特效

粉丝朋友们大家好&#xff0c;我是你们的 csdn的博主&#xff1a;lqj_本人 哔哩哔哩&#xff1a;小淼前端 另外&#xff0c;大家也可以关注我的哔哩哔哩账号&#xff0c;我会不定时的发布一些有关于全栈云开发以及前端开发的详解视频源码 1.微信小程序腾讯云开发之学生端收集数…

关于节日文化的HTML网页设计-----二十四节气

&#x1f329;️ 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f482; 作者主页: 【进入主页—&#x1f680;获取更多源码】 &#x1f393; web前端期末大作业&#xff1a; 【&#x1f4da;HTML5网页期末作业 (1000套…

二十四节气-立冬文案、海报。万物收藏,冬之伊始。

立冬将至&#xff0c;奉上一些立冬文案和海报&#xff0c;快来看看吧&#xff01; 更多立冬海报素材免费下载&#xff1a; https://www.sucai999.com/?vNTYwNDUx 1.日照数九冬至天&#xff0c;清霜风高未辞岁 2.大河奔涌&#xff0c;不因冬止&#xff0c;寰球凉热共此时 3.…

QNAP NAS局域网无法访问的解决方法

最近在使用威联通NAS的时候突然访问不到设备&#xff0c;各种方法都无法建立连接&#xff0c;NAS自闭了……&#xff0c;找遍网上也没有找到解决方法&#xff0c;人也自闭了……&#xff0c;经过几天的摸索终于找到了问题所在&#xff0c;原因居然是NAS自己把自己网线掐了 问题…

逆水寒服务器维护7.5,逆水寒7.26日维护到什么时候 逆水寒7.26日游戏改动汇总介绍...

逆水寒7.26日维护到什么时候 逆水寒7.26日游戏改动汇总介绍 2018-07-26 10:08:08来源&#xff1a;游戏下载编辑&#xff1a;苦力趴评论(0) 《逆水寒》官方发布微博&#xff0c;称为了保证服务器的运行稳定和服务质量&#xff0c;将于7月26日上午7:00-上午10:00进行停服维护。此…

逆水寒服务器维护到什么时候,逆水寒11月1日更新到什么时候_维护到几点

逆水寒11月1日周四例行维护&#xff0c;首届跨服比武大会“说英雄谁是英雄”将正式拉开战火&#xff0c;同时将上线大批的时装&#xff0c;感兴趣的一起来看看吧。 逆水寒11月1日更新预告&#xff1a; 更新时间&#xff1a;上午08&#xff1a;00-10&#xff1a;00更新维护 首届…

逆水寒服务器怎么全维护,《逆水寒》2020年1月22日更新公告

各位自在同门&#xff1a; 为了保证服务器的运行稳定和服务质量&#xff0c;《逆水寒》将于2020年1月22日(周三)早8:00停机进行维护工作&#xff0c;预计维护到上午10:00。本周更新较往常提前了一天&#xff0c;周四不再进行维护更新。1月30日(初六)春节假期的维护更新将暂停一…

网易逆水寒服务器型号,《逆水寒》周年庆 网易:什么要求都满足

逆水寒在生日之际&#xff0c;交上了一份给玩家的答卷&#xff0c;推出了全新资料片“混江湖“。更轻松、更休闲、更有市井烟火气的全新江湖&#xff0c;现已面向所有玩家开放。 这次逆水寒针对玩家建议&#xff0c;究竟做了哪些更新呢&#xff1f; 玩家&#xff1a;日常一条龙…

逆水寒智能NPC也会结婚生子!|与AI共创游戏未来,掀起AIGC革命性体验!

网易6月30日将正式开服公测的《逆水寒》手游&#xff0c;推出被“逆水寒游戏GPT”加持的高智能AINPC&#xff0c;号称玩家可与NPC无限交流&#xff0c;甚至插手NPC私生活&#xff0c;改变游戏走向。与多数游戏中NPC只会“按部就班”做事设定不同的是&#xff0c;AI赋能下的智能…

笔记本玩逆水寒服务器未响应,运行逆水寒电脑崩溃怎么办_逆水寒运行游戏时电脑崩溃问题解决指引_游戏吧...

部分笔记本在运行逆水寒游戏时会出现崩溃现象&#xff0c;许多玩家都不知道该怎么办&#xff0c;如何解决这个问题&#xff0c;下面玩家宝宝们就和游戏吧小编一起来看一看《逆水寒》运行游戏时电脑崩溃问题解决指引吧&#xff01; 《逆水寒》运行游戏时电脑崩溃问题解决指引 亲…

逆水寒服务器维护,逆水寒11月29日更新到几点进游戏 逆水寒更新维护公告

逆水寒在11月29日进行了一次新版本的更新&#xff0c;新团本风雪铁牢关要上线了&#xff0c;很多奖励接踵而来&#xff0c;一些小伙伴还不知道更新了什么&#xff0c;下面就来为大家分享一下逆水寒的更新维护公告。 各位自在同门&#xff1a; 为了保证服务器的运行稳定和服务质…

逆水寒计算机丢失api,逆水寒游戏崩溃常见问题汇总 逆水寒常见问题解决方法...

逆水寒游戏可能因为太过于火爆让许多小问题层出不穷,许多玩家都遇到过一进游戏就发生了逆水寒游戏崩溃的情况,或者就是提示游戏正在运行,无法正常打开,不用担心点击查看逆水寒常见问题解决方法来保护您流畅运行游戏吧。 受到网络、下载服务器、操作系统等多方面的原因的影响…

逆水寒服务器维护26号,逆水寒维护到几点 逆水寒8.23维护公告时间

逆水寒维护到几点?逆水寒几点可以登录游戏?逆水寒今天更新维护了哪些内容?逆水寒在8月23日更新了最新的版本内容。下面&#xff0c;就随琵琶网小编来了解一下! 逆水寒维护到几点? 《逆水寒》于2018年8月23日早上8:00停机进行维护工作&#xff0c;预计维护到上午10:00。 逆水…

遇见逆水寒服务器修复,遇见逆水寒暂时关服修整,改为乙女游戏,下次再见就是氪金之时?...

原标题&#xff1a;遇见逆水寒暂时关服修整&#xff0c;改为乙女游戏&#xff0c;下次再见就是氪金之时&#xff1f; 作为逆水寒的衍生作&#xff0c;遇见逆水寒虽然写作“NPC攻略小助手”&#xff0c;但实际上却是一款“恋爱”手游&#xff0c;对象正是逆水寒端游中比较受欢迎…

阿里云推出工作学习 AI 助手“通义听悟”;谷歌发布 PaLM2;吴恩达推出了三门课

&#x1f989; AI新闻 &#x1f680; 阿里云推出工作学习 AI 助手“通义听悟” 摘要&#xff1a;阿里云峰会・粤港澳大湾区上&#xff0c;阿里云宣布推出最新产品“通义听悟”&#xff0c;该产品能用于会议讨论、教学培训、调研访谈、视频观看等场景&#xff0c;依托大模型&a…

面向开发者的 ChatGPT 提示工程课程|吴恩达携手OpenAI 教你如何编写 prompt

提示工程&#xff08;Prompt Engineering&#xff09;是一门相对较新的学科&#xff0c;旨在开发和优化提示&#xff0c;从而高效地将语言模型(LM)用于各种应用和研究主题&#xff0c;并帮助开发人员更好地理解大型语言模型(LLM)的能力和局限。随着 ChatGPT 等大语言模型的爆火…

解决:同样的Python程序,在cmd和pycharm都能正常运行,但是在Visual Studio Code却报错,且`conda activate`命令无法激活或切换虚拟环境

解决&#xff1a;同样的Python程序&#xff0c;在cmd和pycharm都能正常运行&#xff0c;但是在Visual Studio Code却报错&#xff0c;且conda activate命令无法激活或切换虚拟环境 ⚙️1.软件环境⚙️&#x1f50d;2.问题描述&#x1f50d;&#x1f421;3.解决方法&#x1f421…

2大学英语四级关于计算机的图表作文,大学英语四级图表作文真题写作模板

许多同学都会咨询有关大学英语四级图表作文真题写作的问题&#xff0c;今天小编就针对大学英语四级图表作文真题写作为大家提供一些模板&#xff0c;希望对大家有所帮助。 图表作文提示部分包括图表和文字要点提示两部分。图表的类型主要有&#xff1a;圆形(饼型)图(pie chart)…