HTML5之 夜景放烟花


参考网址
https://blog.csdn.net/Gou_Hailong/article/details/122269931
https://blog.csdn.net/u013343616/article/details/122233674

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html;charset=gb2312"><style>body{margin:0;padding:0;overflow: hidden;}.city{width:100%;position:fixed;bottom: 0px;z-index: 100;}.city img{width: 100%;}</style><title>html5夜景放烟花绽放动画效果</title>
</head>
<body onselectstart = "return false"><div style="height:700px;overflow:hidden;"><canvas id='cas' style="background-color:rgba(0,5,24,1);">浏览器不支持canvas</canvas><div class="city"><img src="img/city.png" alt="" /></div><img src="img/moon.png" alt="" id="moon" style="visibility: hidden;"/><div style="display:none"><div class="shape">新年快乐</div><div class="shape">合家幸福</div><div class="shape">万事如意</div><div class="shape">心想事成</div><div class="shape">财源广进</div></div></div><script>var canvas = document.getElementById("cas");var ocas = document.createElement("canvas");var octx = ocas.getContext("2d");var ctx = canvas.getContext("2d");ocas.width = canvas.width = window.innerWidth;ocas.height = canvas.height = 700;var bigbooms = [];window.onload = function(){initAnimate()}function initAnimate(){drawBg();lastTime = new Date();animate();}var lastTime;function animate(){ctx.save();ctx.fillStyle = "rgba(0,5,24,0.1)";ctx.fillRect(0,0,canvas.width,canvas.height);ctx.restore();var newTime = new Date();if(newTime-lastTime>500+(window.innerHeight-767)/2){var random = Math.random()*100>2?true:false;var x = getRandom(canvas.width/5 , canvas.width*4/5);var y = getRandom(50 , 200);if(random){var bigboom = new Boom(getRandom(canvas.width/3,canvas.width*2/3) ,2,"#FFF" , {x:x , y:y});bigbooms.push(bigboom)}else {var bigboom = new Boom(getRandom(canvas.width/3,canvas.width*2/3) ,2,"#FFF" , {x:canvas.width/2 , y:200} , document.querySelectorAll(".shape")[parseInt(getRandom(0, document.querySelectorAll(".shape").length))]);bigbooms.push(bigboom)}lastTime = newTime;console.log(bigbooms)}stars.foreach(function(){this.paint();})drawMoon();bigbooms.foreach(function(index){var that = this;if(!this.dead){this._move();this._drawLight();}else{this.booms.foreach(function(index){if(!this.dead) {this.moveTo(index);}else if(index === that.booms.length-1){bigbooms[bigbooms.indexOf(that)] = null;}})}});raf(animate);}function drawMoon(){var moon = document.getElementById("moon");var centerX = canvas.width-200 , centerY = 100 , width = 80;if(moon.complete){ctx.drawImage(moon , centerX , centerY , width , width )}else {moon.onload = function(){ctx.drawImage(moon ,centerX , centerY , width , width)}}var index = 0;for(var i=0;i<10;i++){ctx.save();ctx.beginPath();ctx.arc(centerX+width/2 , centerY+width/2 , width/2+index , 0 , 2*Math.PI);ctx.fillStyle="rgba(240,219,120,0.005)";index+=2;ctx.fill();ctx.restore();}}Array.prototype.foreach = function(callback){for(var i=0;i<this.length;i++){if(this[i]!==null) callback.apply(this[i] , [i])}}var raf = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); };canvas.onclick = function(){var x = event.clientX;var y = event.clientY;var bigboom = new Boom(getRandom(canvas.width/3,canvas.width*2/3) ,2,"#FFF" , {x:x , y:y});bigbooms.push(bigboom)}// canvas.addEventLisener("touchstart" , function(event){//  var touch = event.targetTouches[0];//  var x = event.pageX;//  var y = event.pageY;//  var bigboom = new Boom(getRandom(canvas.width/3,canvas.width*2/3) ,2,"#FFF" , {x:x , y:y});//  bigbooms.push(bigboom)// })var Boom = function(x,r,c,boomArea,shape){this.booms = [];this.x = x;this.y = (canvas.height+r);this.r = r;this.c = c;this.shape = shape || false;this.boomArea = boomArea;this.theta = 0;this.dead = false;this.ba = parseInt(getRandom(80 , 200));}Boom.prototype = {_paint:function(){ctx.save();ctx.beginPath();ctx.arc(this.x,this.y,this.r,0,2*Math.PI);ctx.fillStyle = this.c;ctx.fill();ctx.restore();},_move:function(){var dx = this.boomArea.x - this.x , dy = this.boomArea.y - this.y;this.x = this.x+dx*0.01;this.y = this.y+dy*0.01;if(Math.abs(dx)<=this.ba && Math.abs(dy)<=this.ba){if(this.shape){this._shapBoom();}else this._boom();this.dead = true;}else {this._paint();}},_drawLight:function(){ctx.save();ctx.fillStyle = "rgba(255,228,150,0.3)";ctx.beginPath();ctx.arc(this.x , this.y , this.r+3*Math.random()+1 , 0 , 2*Math.PI);ctx.fill();ctx.restore();},_boom:function(){var fragNum = getRandom(30 , 200);var style = getRandom(0,10)>=5? 1 : 2;var color;if(style===1){color = {a:parseInt(getRandom(128,255)),b:parseInt(getRandom(128,255)),c:parseInt(getRandom(128,255))}}var fanwei = parseInt(getRandom(300, 400));for(var i=0;i<fragNum;i++){if(style===2){color = {a:parseInt(getRandom(128,255)),b:parseInt(getRandom(128,255)),c:parseInt(getRandom(128,255))}}var a = getRandom(-Math.PI, Math.PI);var x = getRandom(0, fanwei) * Math.cos(a) + this.x;var y = getRandom(0, fanwei) * Math.sin(a) + this.y; var radius = getRandom(0 , 2)var frag = new Frag(this.x , this.y , radius , color , x , y );this.booms.push(frag);}},_shapBoom:function(){var that = this;putValue(ocas , octx , this.shape , 5, function(dots){var dx = canvas.width/2-that.x;var dy = canvas.height/2-that.y;for(var i=0;i<dots.length;i++){color = {a:dots[i].a,b:dots[i].b,c:dots[i].c}var x = dots[i].x;var y = dots[i].y;var radius = 1;var frag = new Frag(that.x , that.y , radius , color , x-dx , y-dy);that.booms.push(frag);}})}}function putValue(canvas , context , ele , dr , callback){context.clearRect(0,0,canvas.width,canvas.height);var img = new Image();if(ele.innerHTML.indexOf("img")>=0){img.src = ele.getElementsByTagName("img")[0].src;imgload(img , function(){context.drawImage(img , canvas.width/2 - img.width/2 , canvas.height/2 - img.width/2);dots = getimgData(canvas , context , dr);callback(dots);})}else {var text = ele.innerHTML;context.save();var fontSize =200;context.font = fontSize+"px 宋体 bold";context.textAlign = "center";context.textBaseline = "middle";context.fillStyle = "rgba("+parseInt(getRandom(128,255))+","+parseInt(getRandom(128,255))+","+parseInt(getRandom(128,255))+" , 1)";context.fillText(text , canvas.width/2 , canvas.height/2);context.restore();dots = getimgData(canvas , context , dr);callback(dots);}}function imgload(img , callback){if(img.complete){callback.call(img);}else {img.onload = function(){callback.call(this);}}}function getimgData(canvas , context , dr){var imgData = context.getImageData(0,0,canvas.width , canvas.height);context.clearRect(0,0,canvas.width , canvas.height);var dots = [];for(var x=0;x<imgData.width;x+=dr){for(var y=0;y<imgData.height;y+=dr){var i = (y*imgData.width + x)*4;if(imgData.data[i+3] > 128){var dot = {x:x , y:y , a:imgData.data[i] , b:imgData.data[i+1] , c:imgData.data[i+2]};dots.push(dot);}}}return dots;}function getRandom(a , b){return Math.random()*(b-a)+a;}var maxRadius = 1 , stars=[];function drawBg(){for(var i=0;i<100;i++){var r = Math.random()*maxRadius;var x = Math.random()*canvas.width;var y = Math.random()*2*canvas.height - canvas.height;var star = new Star(x , y , r);stars.push(star);star.paint()}}var Star = function(x,y,r){this.x = x;this.y=y;this.r=r;}Star.prototype = {paint:function(){ctx.save();ctx.beginPath();ctx.arc(this.x , this.y , this.r , 0 , 2*Math.PI);ctx.fillStyle = "rgba(255,255,255,"+this.r+")";ctx.fill();ctx.restore();}}var focallength = 250;var Frag = function(centerX , centerY , radius , color ,tx , ty){this.tx = tx;this.ty = ty;this.x = centerX;this.y = centerY;this.dead = false;this.centerX = centerX;this.centerY = centerY;this.radius = radius;this.color = color;}Frag.prototype = {paint:function(){ctx.save();ctx.beginPath();ctx.arc(this.x , this.y , this.radius , 0 , 2*Math.PI);ctx.fillStyle = "rgba("+this.color.a+","+this.color.b+","+this.color.c+",1)";ctx.fill()ctx.restore();},moveTo:function(index){this.ty = this.ty+0.3;var dx = this.tx - this.x , dy = this.ty - this.y;this.x = Math.abs(dx)<0.1 ? this.tx : (this.x+dx*0.1);this.y = Math.abs(dy)<0.1 ? this.ty : (this.y+dy*0.1);if(dx===0 && Math.abs(dy)<=80){this.dead = true;}this.paint();}}</script></body></html>

目录结构
在这里插入图片描述
在这里插入图片描述

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

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

相关文章

C/C++ BM2链表内指定区间反转

C/C++ BM2链表内指定区间反转

文章目录 前言题目1. 解决方案一1.1 思路阐述1.2 源码 2. 解决方案二2.1 思路阐述2.2 源码 总结 前言 这题是BM1的升级版&#xff0c;不过是把完整的链表翻转变成了指定区间。 题目 描述 将一个节点数为 size 链表 m 位置到 n 位置之间的区间反转&#xff0c;要求时间复杂度 …
阅读更多...
手机蓝牙在物联网超市中的应用

手机蓝牙在物联网超市中的应用

超市一站式购物已进入城市的千家万户。然而人们在选购时却采用直接翻阅商品的方式&#xff0c;既不方便又不卫生甚至大大缩短食品类商品保质期&#xff0c;也给超市商品管理造成很大难度。物联网(The Internet of things)基于射频识别(RFID)、红外感应等技术&#xff0c;把物品…
阅读更多...
CentOS环境下Nacos2.3集成PostgreSQL

CentOS环境下Nacos2.3集成PostgreSQL

title: CentOS环境下Nacos2.3集成PostgreSQL date: 2023-12-21 19:15:00 categories: Nacos description: CentOS环境下Nacos2.3集成PostgreSQL 1. 目录 1. 目录2. 简介3. 安装部署 3.1. 部署模式3.2. 环境准备3.3. 下载安装文件3.4. PostgreSQL插件 3.4.1. 下载地址3.4.2. 结…
阅读更多...
VScode远程连接服务器，Pycharm专业版下载及远程连接（深度学习远程篇）

VScode远程连接服务器，Pycharm专业版下载及远程连接（深度学习远程篇）

Visual Code、PyCharm专业版&#xff0c;本地和远程交互。 远程连接需要用到SSH协议的技术&#xff0c;常用的代码编辑器vscode 和 pycharm都有此类功能。社区版的pycharm是免费的&#xff0c;但是社区版不支持ssh连接服务器&#xff0c;只有专业版才可以&#xff0c;需要破解…
阅读更多...
【论文阅读】MCANet: Medical Image Segmentation with Multi-Scale Cross-Axis Attention

【论文阅读】MCANet: Medical Image Segmentation with Multi-Scale Cross-Axis Attention

文章目录 摘要创新点总结实现效果总结 摘要 链接&#xff1a;https://arxiv.org/abs/2312.08866 医学图像分割是医学图像处理和计算机视觉领域的关键挑战之一。由于病变区域或器官的大小和形状各异&#xff0c;有效地捕捉多尺度信息和建立像素间的长距离依赖性至关重要。本文提…
阅读更多...
人工智能_机器学习073_SVM支持向量机_人脸识别模型建模_预测可视化_网格搜索交叉验证最优化参数对比---人工智能工作笔记0113

人工智能_机器学习073_SVM支持向量机_人脸识别模型建模_预测可视化_网格搜索交叉验证最优化参数对比---人工智能工作笔记0113

接着上一节来说,可以看到我们已经找到了合适的参数,然后 我们可以看一下这里 gc.best_params_ 就可以打印出最合适的参数 然后我们把最合适串按说填入到代码中,然后进行计算,看看得分 可以看到得分,训练数据是1.0 然后测试数据得分是0.7857...对吧
阅读更多...
2024深入评测CleanMyMac X4.14.6破解版新的功能

2024深入评测CleanMyMac X4.14.6破解版新的功能

随着时间的推移&#xff0c;我们的Mac电脑往往会变得越来越慢&#xff0c;存储空间变得越来越紧张&#xff0c;这时候一个优秀的清理工具就显得尤为重要。作为一款备受好评的Mac清理工具&#xff0c;它能够为你的Mac带来全方位的清理和优化。在本文中&#xff0c;我们将深入评测…
阅读更多...
【HarmonyOS开发】OpenHarmony如何实现⼀次开发，多端部署

【HarmonyOS开发】OpenHarmony如何实现⼀次开发，多端部署

OpenHarmony提供用户程序框架、Ability框架以及UI框架&#xff0c;能够保证开发的应用在多终端运行时保证一致性。一次开发、多端部署。 多终端软件平台API具备一致性&#xff0c;确保用户程序的运行兼容性。 HarmonyOS提供了用户程序框架、Ability框架以及UI框架&#xff0c;…
阅读更多...
WebRTC概念

WebRTC概念

定义 一个实时通信标准 通话原理 媒体协商 在WebRTC中&#xff0c;参与视频通讯的双方必须先交换SDP信息&#xff0c;获得一个都支持的编码格式 网络协商 目的&#xff1a;找到一条相互通讯的链路 做法&#xff1a;获取外网IP地址映射&#xff0c;通过信令服务器交换“网…
阅读更多...
华锐三维云展平台 | VR在线展览云平台提供定制化虚拟展厅制作工具

华锐三维云展平台 | VR在线展览云平台提供定制化虚拟展厅制作工具

随着科技的飞速发展&#xff0c;互联网技术的不断革新&#xff0c;广州华锐互动顺应时代需求&#xff0c;开发了VR在线展览云平台&#xff0c;用户可以在平台上自主创建属于自己的3D展厅。VR在线展览云平台正改变着传统展览行业的模式&#xff0c;为参展者提供更高效、更便捷、…
阅读更多...
Hazel macOS自动化清理

Hazel macOS自动化清理

Hazel是一款在Mac平台上的自动化文件管理工具&#xff0c;它可以帮助用户自动化处理文件&#xff0c;从而提高工作效率和减少重复性任务的时间和精力。以下是Hazel软件的功能特色&#xff1a; 强大的自动化处理功能&#xff1a;Hazel可以根据用户设定的规则&#xff0c;自动执…
阅读更多...
Android---Kotlin 学习009

Android---Kotlin 学习009

继承 在 java 里如果一个类没有被 final 关键字修饰&#xff0c;那么它都是可以被继承的。而在 kotlin 中&#xff0c;类默认都是封闭的&#xff0c;要让某个类开放继承&#xff0c;必须使用 open 关键字修饰它&#xff0c;否则会编译报错。此外在子类中&#xff0c;如果要复写…
阅读更多...
Redis设计与实现之服务器与客户端

Redis设计与实现之服务器与客户端

目录 一、服务器与客户端 1、初始化服务器 1. 初始化服务器全局状态 2. 载入配置文件 3. 创建 daemon 进程 4. 初始化服务器功能模块 5. 载入数据 6. 开始事件循环 2、 客户端连接到服务器 3、命令的请求、处理和结果返回 4、命令请求实例:SET 的执行过程 5、Redis服…
阅读更多...
数据仓库【1】：简介

数据仓库【1】：简介

数据仓库【1】&#xff1a;简介 1、诞生背景1.1、数据仓库诞生原因1.2、历史数据积存1.3、企业数据分析需要 2、基本概述2.1、数据仓库&#xff08;Data Warehouse&#xff0c;DW&#xff09;2.2、数据仓库特点2.3、数据仓库 VS 数据库 3、技术实现3.1、数据仓库建设方案3.2、传…
阅读更多...
sql_lab之sqli中的搜索型注入

sql_lab之sqli中的搜索型注入

搜索型注入 原理是运用模糊查询&#xff1a; select * from users where username like %a% 1.找到具有模糊查询的搜索框的注入点 2.构造闭合 因为模糊查询的代码是 select * from users where username like %a% 所以应该 鱼%’ -- s 判断构造闭合的函数是否正确 鱼%…
阅读更多...
【JavaEE初阶一】线程的概念与简单创建

【JavaEE初阶一】线程的概念与简单创建

1. 认识线程&#xff08;Thread&#xff09; 1.1 关于线程 1.1.1 线程是什么 由前一节的内容可知&#xff0c;进程在进行频繁的创建和销毁的时候&#xff0c;开销比较大&#xff08;主要体现在资源的申请和释放上&#xff09;&#xff0c;线程就是为了解决上述产生的问题而提…
阅读更多...
apache禁止遍历目录

apache禁止遍历目录

禁止Apache显示目录索引&#xff0c;禁止Apache显示目录结构列表&#xff0c;禁止Apache浏览目录&#xff0c;这是网上提问比较多的&#xff0c;其实都是一个意思。下面说下禁止禁止Apache显示目录索引的常见的3种方法。 要实现禁止Apache显示目录索引&#xff0c;只需将 Optio…
阅读更多...
Jenkins的特殊操作定时自动执行任务以及测试报告调优

Jenkins的特殊操作定时自动执行任务以及测试报告调优

java -Dhudson.model.DirectoryBrowserSupport.CSP -jar Jenkins.war 测试报告 不美丽 执行上面的代码 重启jenkins 就好了
阅读更多...
Ai企业系统源码 Ai企联系统源码 商用去授权 支持文心 星火 GPT4等等20多种接口

Ai企业系统源码 Ai企联系统源码 商用去授权 支持文心 星火 GPT4等等20多种接口

智思Ai系统2.4.9版本去授权&#xff08;可商用&#xff09;支持市面上所有版本的接口例如&#xff1a;文心、星火、GPT4等等20多种接口&#xff01;代过审AI小程序类目&#xff01;&#xff01;&#xff01; 安装步骤&#xff1a; 1、在宝塔新建个站点&#xff0c;php版本使用…
阅读更多...
使用pytorch神经网络拟合计算模型

使用pytorch神经网络拟合计算模型

一. 内容简介 python调用百度翻译api&#xff0c;将中文论文翻译英文&#xff0c;并保留部分格式 二. 软件环境 2.1vsCode 2.2Anaconda version: conda 22.9.0 2.3数据文件 链接&#xff1a;https://pan.baidu.com/s/1csJOoErGyx77MW_FImVKjg?pwd1234 三.主要流程 3.…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023