web前端项目-七彩夜空烟花【附源码】

web前端项目-七彩动态夜空烟花【附源码】

本项目仅使用了HTML,代码简单,实现效果绚丽,且本项目代码直接运行即可实现,无需图片素材,接下来让我们一起实现一场美丽的烟花秀叭

运行效果:鼠标点击和移动可控制烟花方向,烟花颜色自动变化
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

HTML源码
<!DOCTYPE html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Enjoy fireworks</title> <script type="text/javascript" src="http://g.huceo.com/weixin/qw/jquery.min.js"></script><script type="text/javascript">var dataForWeixin = {appId: "gh_ff79a97cd7f3",url: "http://g.huceo.com/weixin/yh/en/",title: "Lonely fireworks shows, if you feel good, please share the wechat!",desc: "Lonely fireworks shows, if you feel good, please share the wechat!"};var onBridgeReady = function(){WeixinJSBridge.on('menu:share:appmessage', function(argv){var infos = $("#infos").text();     WeixinJSBridge.invoke('sendAppMessage', {"appid": dataForWeixin.appId,"img_url": dataForWeixin.TLImg,"img_width": "120","img_height": "120","link": dataForWeixin.url + '?f=wx_hy_bb',"title": infos + dataForWeixin.title,"desc": dataForWeixin.desc });setTimeout(function () {location.href = "http://g.huceo.com/weixin/yh/en/";}, 1500); });WeixinJSBridge.on('menu:share:timeline', function(argv){var infos = $("#infos").text();             WeixinJSBridge.invoke('shareTimeline', {"appid": dataForWeixin.appId,"img_url":dataForWeixin.TLImg,"img_width": "120","img_height": "120","link": dataForWeixin.url + '?f=wx_pyq_bb',"title": infos + dataForWeixin.title,"desc": dataForWeixin.desc});setTimeout(function () {location.href = "http://g.huceo.com/weixin/yh/en/";}, 1500);  });};if(document.addEventListener){document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);}else if(document.attachEvent){document.attachEvent('WeixinJSBridgeReady', onBridgeReady);document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);}   </script>
<style>
body {background: #000;margin: 0;
}canvas {cursor: crosshair;display: block;
}
.STYLE1 {color: #333333}
</style>
</head>
<div style="text-align:center;clear:both"></div>
<canvas id="canvas"><span class="STYLE1">Open IE effect more perfect </span></canvas>
<script>
window.requestAnimFrame = ( function() {return window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||function( callback ) {window.setTimeout( callback, 1000 / 60 );};
})();
var canvas = document.getElementById( 'canvas' ),ctx = canvas.getContext( '2d' ),cw = window.innerWidth,ch = window.innerHeight,fireworks = [],particles = [],hue = 120,limiterTotal = 5,limiterTick = 0,timerTotal = 80,timerTick = 0,mousedown = false,mx,my;
canvas.width = cw;
canvas.height = ch;
function random( min, max ) {return Math.random() * ( max - min ) + min;
}
function calculateDistance( p1x, p1y, p2x, p2y ) {var xDistance = p1x - p2x,yDistance = p1y - p2y;return Math.sqrt( Math.pow( xDistance, 2 ) + Math.pow( yDistance, 2 ) );
}function Firework( sx, sy, tx, ty ) {this.x = sx;this.y = sy;this.sx = sx;this.sy = sy;this.tx = tx;this.ty = ty;this.distanceToTarget = calculateDistance( sx, sy, tx, ty );this.distanceTraveled = 0;this.coordinates = [];this.coordinateCount = 3;while( this.coordinateCount-- ) {this.coordinates.push( [ this.x, this.y ] );}this.angle = Math.atan2( ty - sy, tx - sx );this.speed = 2;this.acceleration = 1.05;this.brightness = random( 50, 70 );this.targetRadius = 1;
}
Firework.prototype.update = function( index ) {this.coordinates.pop();this.coordinates.unshift( [ this.x, this.y ] );if( this.targetRadius < 8 ) {this.targetRadius += 0.3;} else {this.targetRadius = 1;}this.speed *= this.acceleration;var vx = Math.cos( this.angle ) * this.speed,vy = Math.sin( this.angle ) * this.speed;this.distanceTraveled = calculateDistance( this.sx, this.sy, this.x + vx, this.y + vy );if( this.distanceTraveled >= this.distanceToTarget ) {createParticles( this.tx, this.ty );fireworks.splice( index, 1 );} else {this.x += vx;this.y += vy;}
}Firework.prototype.draw = function() {ctx.beginPath();ctx.moveTo( this.coordinates[ this.coordinates.length - 1][ 0 ], this.coordinates[ this.coordinates.length - 1][ 1 ] );ctx.lineTo( this.x, this.y );ctx.strokeStyle = 'hsl(' + hue + ', 100%, ' + this.brightness + '%)';ctx.stroke();ctx.beginPath();ctx.arc( this.tx, this.ty, this.targetRadius, 0, Math.PI * 2 );ctx.stroke();
}function Particle( x, y ) {this.x = x;this.y = y;this.coordinates = [];this.coordinateCount = 5;while( this.coordinateCount-- ) {this.coordinates.push( [ this.x, this.y ] );}this.angle = random( 0, Math.PI * 2 );this.speed = random( 1, 10 );this.friction = 0.95;this.gravity = 1;this.hue = random( hue - 20, hue + 20 );this.brightness = random( 50, 80 );this.alpha = 1;this.decay = random( 0.015, 0.03 );
}Particle.prototype.update = function( index ) {this.coordinates.pop();this.coordinates.unshift( [ this.x, this.y ] );this.speed *= this.friction;this.x += Math.cos( this.angle ) * this.speed;this.y += Math.sin( this.angle ) * this.speed + this.gravity;this.alpha -= this.decay;if( this.alpha <= this.decay ) {particles.splice( index, 1 );}
}Particle.prototype.draw = function() {ctx. beginPath();ctx.moveTo( this.coordinates[ this.coordinates.length - 1 ][ 0 ], this.coordinates[ this.coordinates.length - 1 ][ 1 ] );ctx.lineTo( this.x, this.y );ctx.strokeStyle = 'hsla(' + this.hue + ', 100%, ' + this.brightness + '%, ' + this.alpha + ')';ctx.stroke();
}function createParticles( x, y ) {var particleCount = 30;while( particleCount-- ) {particles.push( new Particle( x, y ) );}
}
function loop() {requestAnimFrame( loop );hue += 0.5;ctx.globalCompositeOperation = 'destination-out';ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';ctx.fillRect( 0, 0, cw, ch );ctx.globalCompositeOperation = 'lighter';var i = fireworks.length;while( i-- ) {fireworks[ i ].draw();fireworks[ i ].update( i );}var i = particles.length;while( i-- ) {particles[ i ].draw();particles[ i ].update( i );}if( timerTick >= timerTotal ) {if( !mousedown ) {fireworks.push( new Firework( cw / 2, ch, random( 0, cw ), random( 0, ch / 2 ) ) );timerTick = 0;}} else {timerTick++;}if( limiterTick >= limiterTotal ) {if( mousedown ) {fireworks.push( new Firework( cw / 2, ch, mx, my ) );limiterTick = 0;}} else {limiterTick++;}
}canvas.addEventListener( 'mousemove', function( e ) {mx = e.pageX - canvas.offsetLeft;my = e.pageY - canvas.offsetTop;
});canvas.addEventListener( 'mousedown', function( e ) {e.preventDefault();mousedown = true;
});canvas.addEventListener( 'mouseup', function( e ) {e.preventDefault();mousedown = false;
});window.onload = loop;
</script>
<audio autoplay="autoplay">
<source src="http://www.sypeiyin.cn/Uploads/zh/News/2012071516257FJR.mp3" type="audio/mpeg">
</audio>

注意: 本项目代码直接运行即可实现,无需图片素材

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

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

相关文章

理解SpringMVC的工作流程

组件 前置控制器 DispatcherServlet。 映射控制器 HandlerMapping。 处理器 Controller。 模型和视图 ModelAndView。 视图解析器 ViewResolver。 工作流程 spring mvc 先将请求发送给 DispatcherServlet。 DispatcherServlet 查询一个或多个 HandlerMapping&#xff0c;找到…

jmeter-set up先登录获取token,再测试

一、何为setup 一种特殊类型的线程组&#xff0c;可用于执行预测试操作&#xff1b;简单来讲就是执行测试线程组前&#xff0c;先执行setup 作用 例如前面&#xff0c;我们说到的&#xff0c;压测之前只用JMeter调用业务接口造数或者通过JDBC操作数据库造数&#xff0c;可以放…

网络安全法规和模型

基础 ISO信息安全&#xff1a;为数据处理系统建立和采取技术、管理的安全保护&#xff0c;保护计算机硬件、软件、数据不因偶然的或恶意的原因而受到破坏、更改、泄露 信息安全属性&#xff1a; CIA三元组&#xff1a;保密性、完整性、可用性 其他属性&#xff1a;真实性、不…

鸿蒙开发中的坑(持续更新……)

最近在使用鸿蒙开发时&#xff0c;碰到了一些坑&#xff0c;特做记录&#xff0c;如&#xff1a;鸿蒙的preview不能预览&#xff0c;轮播图组件Swiper使用时的问题&#xff0c;console.log() 打印的内容 一、鸿蒙的preview不能预览 首先&#xff0c;只有 ets文件才能预览。 其…

Spring系列学习二、Spring框架的环境配置

Spring框架的环境配置 一、Java环境配置二、 Spring框架的安装与配置三、Maven与Gradle环境的配置四、IDE环境配置&#xff08;Eclipse与IntelliJ IDEA&#xff09;五、结语 一、Java环境配置 所有编程旅程总是得从基础开始&#xff0c;如同乐高积木大作的基座&#xff0c;首先…

408数据结构错题知识点拾遗

408相关&#xff1a; 408数据结构错题知识点拾遗 408计算机网络错题知识点拾遗 对于数据结构的学习&#xff0c;个人认为要对概念性的东西进行理解&#xff0c;特别是树的性质、图的相关性质和考察的相应算法。应用题强化的话&#xff0c;对于每一章节尾的应用小节&#xff0c…

蓝桥杯c/c++程序设计——冶炼金属

冶炼金属 问题描述 小蓝有一个神奇的炉子用于将普通金属 O 冶炼成为一种特殊金属 X。这个炉子有一个称作转换率的属性 V&#xff0c;V 是一个正整数&#xff0c;这意味着消耗 V 个普通金属 O 恰好可以冶炼出一个特殊金属 X&#xff0c;当普通金属 O 的数目不足 V 时&#xff0…

Python - 深夜数据结构与算法之 Divide Conquer Backtrack

目录 一.引言 二.分治与回溯简介 1.Divide & Conquer 分治 2.BackTrack 回溯 三.经典算法实战 1.Combination-Of-Phone [17] 2.Permutations [46] 3.Permutations-2 [47] 4.Pow-X [50] 5.N-Queen [51] 6.Combinations [78] 7.Sub-Sets [78] 8.Majority-Elemen…

数组基础及相关例题

目录 1.一维数组的初始化 2.二维数组的初始化 3.字符数组 1.puts 2.gets 3.strcat 4.strcpy 5.strcmp 6.strlen ​编辑 7. strlwr与strupr 易错习题 1 2 3 4 5 6 1.一维数组的初始化 2.二维数组的初始化 注意 第一维的长度不用指定&#xff0c;第二维的…

方舟开发框架(ArkUI)概述

目录 1、基本概念 2、两种开发范式 3、开发框架的特性 4、UI开发&#xff08;ArkTS声明式开发范式&#xff09;概述 4.1、特点 4.2、整体架构 4.3、开发流程 方舟开发框架&#xff08;简称ArkUI&#xff09;为HarmonyOS应用的UI开发提供了完整的基础设施&#xff0c;包…

C# 通过SharpCompress.Archives.Rar解压RaR文件

/// <summary>/// 解压一个Rar文件/// </summary>/// <param name"RarFile">需要解压的Rar文件&#xff08;绝对路径&#xff09;</param>/// <param name"TargetDirectory">解压到的目录</param>/// <param name&…

基于SSM的学生成绩管理系统2.0

基于SSM的学生成绩管理系统2.0 一、系统介绍二、功能展示1.项目骨架2.成绩信息列表3.课程信息列表4.添加学生信息 四、其它1.其他系统实现五.获取源码 一、系统介绍 项目名称&#xff1a;基于SSM的学生成绩管理系统2.0 项目架构&#xff1a;B/S架构 开发语言&#xff1a;Jav…

2024年科技盛宴“上海智博会·上海软博会”招商工作接近尾声

2024年上海智博会和上海软博会即将于3月份在上海跨国采购会展中心盛大召开。作为全球科技和软件行业的盛会&#xff0c;这两大展会汇集了业界顶尖的企业、创新技术和前瞻思想&#xff0c;吸引了来自世界各地的专业人士和参展商。 今年的展会将一如既往地为大家呈现最前沿的科技…

博易大师智星系统外盘资管系统的功能介绍!

1. 市场行情数据接收和显示&#xff1a;软件需要接收实时的市场行情数据&#xff0c;并将其以图形或数字的形式显示出来&#xff0c;包括价格、成交量、成交额等信息。 2. 交易操作界面&#xff1a;软件需要提供一个交易操作界面&#xff0c;供用户进行交易操作&#xff0c;包括…

DML语言(重点)———update

格式&#xff1a;update 要修改的对象 set 原来的值新值 -- 修改学员名字,带了简介 代码案例&#xff1a; -- 修改学员名字,带了简介 UPDATE student SET name清宸 WHERE id 1; -- 不指定条件情况下&#xff0c;会改动所有表&#xff01; 代码案例…

linux:下载、网络请求、端口

一&#xff1a;ping命令 可以通过ping命令,检查指定的网络服务器是否是可联通状态 语法: ping [-c num] ip或主机名 1、选项&#xff1a;-c,检查的次数&#xff0c;不使用-c选项&#xff0c;将无限次数持续检查 2、参数&#xff1a;ip或主机名&#xff0c;被检查的服务器的…

修复“找不到服务器IP地址”错误

“找不到服务器IP地址”错误是Chrome浏览器用户的常见问题&#xff0c;导致404消息和无法访问网页 一、错误解释&#xff1a;找不到服务器 IP 地址 当您在浏览器的地址栏中输入域名时&#xff0c;如果输入的域名与相应的 Internet 协议地址&#xff08;IP 地址&#xff09;不…

文章解读与仿真程序复现思路——中国电机工程学报EI\CSCD\北大核心《流量自适应方式下考虑热管道虚拟储能的电热能源系统优化调度》

这个标题探讨了在电热能源系统中&#xff0c;通过使用热管道作为一种虚拟储能手段&#xff0c;并结合流量自适应的方式&#xff0c;进行系统的优化调度。 流量自适应方式&#xff1a; 这可能指的是一种系统或算法&#xff0c;能够根据系统内部或外部的实时变化&#xff0c;自动…

python 通过opencv及face_recognition识别人脸

效果&#xff1a; 使用Python的cv2库和face_recognition库来进行人脸检测和比对的 0是代表一样 认为是同一人。 代码&#xff1a; pip install opencv-python pip install face_recognition# 导入cv2库&#xff0c;用于图像处理 import cv2 # 导入face_recognition库&#…

开源持续测试平台Linux MeterSphere本地部署与远程访问

文章目录 前言1. 安装MeterSphere2. 本地访问MeterSphere3. 安装 cpolar内网穿透软件4. 配置MeterSphere公网访问地址5. 公网远程访问MeterSphere6. 固定MeterSphere公网地址 前言 MeterSphere 是一站式开源持续测试平台, 涵盖测试跟踪、接口测试、UI 测试和性能测试等功能&am…