HTML5 烟花系统
需求:在一个虚拟烟花球中,在不同的部位填充不同颜色、质地的烟花火药;观看试放效果。最好能结合点物理学定律(以便展现火药粉被爆炸扩散到一定程度再爆炸的效果)
这是这学期的一个作业,感觉挺无聊的,纯粹是老师个人想法,一开始还不明白烟花球不同部位填充不同烟花火药会和烟花绽放的效果有什么关系,等到中期审查问老师被老师鄙视了,老师举例上下左右填充不同的烟花会有不同的颜色不同的效果。要求不能用Flash,那就用Html5咯,按照要求去实现。
自己胡思乱想做了三种奇怪的效果,分别是线条、点、圆环、曲线,上下左右都可以选择不同样式以及不同的颜色效果,中间选择的颜色是烟花轨迹线条的颜色,效果图如下。

基本实现了,但是存在很多问题,首先是性能问题,感觉不够流畅,其次是浏览器兼容问题,老版本的浏览器播放不了,只有在Chrome和Opera下播放效果才最佳,代码存在很多问题,有待优化。
代码下载地址
http://files.cnblogs.com/stwzhong/MyFireworks.rar
HTML5 烟花系统的更多相关文章
- JavaScript实现HTML5烟花特效
烟花效果如下(请使用支持HTML5的浏览器查看):点击这里查看效果:http://keleyi.com/keleyi/phtml/html5/14.htm 源代码如下: ;}</style> ...
- HTML5 Canvas 超炫酷烟花绽放动画教程
这是一个很酷的HTML5 Canvas动画,它将模拟的是我们现实生活中烟花绽放的动画特效,效果非常逼真,但是毕竟是电脑模拟,带女朋友看就算了,效果还是差了点,呵呵.这个HTML5 Canvas动画有一 ...
- HTML5 Canvas 超逼真烟花绽放动画
各位前端朋友们,大家好!五一假期即将结束,在开启加班模式之前,我要给大家分享一个超酷超逼真的HTML5 Canvas烟花模拟动画.这次升级版的烟花动画有以下几个特点: 烟花绽放时,将展现不同的色彩,不 ...
- 精选19款华丽的HTML5动画和实用案例
下面是本人收集的19款超酷HTML5动画和实用案例,觉得不错,分享给大家. 1.HTML5 Canvas火焰喷射动画效果 还记得以前分享过的一款HTML5烟花动画HTML5 Canvas烟花特效,今天 ...
- 精妙无比 8款HTML5动画实例及源码
1.jQuery垂直带小图标菜单导航插件 今天我们要来分享一款jQuery菜单插件,这款jQuery菜单是垂直的样式,鼠标滑过菜单项时会出现一个背景,菜单项的右侧也会出现一个小箭头.另外值得注意的是, ...
- HTML5/jQuery动画应用 3D视觉效果
今天我们要来分享几款很酷的HTML5/CSS3动画应用,虽然不是HTML5 3D应用,但也有3D的视觉效果.HTML5结合jQuery,让网页应用变得更加强大了.一起来看看这些HTML5/jQuery ...
- 8个超震撼的HTML5和纯CSS3动画源码
HTML5和CSS3之所以强大,不仅因为现在大量的浏览器的支持,更是因为它们已经越来越能满足现代开发的需要.Flash在几年之后肯定会消亡,那么HTML5和CSS3将会替代Flash.今天我们要给大家 ...
- Atitit.播放系统规划新版本 and 最近版本回顾 v3 pbf.doc 1 版本11 (ing)41.1 规划h5本地缓存系列 41.2 Android版本app41.3 双类别系统,
Atitit.播放系统规划新版本 and 最近版本回顾 v3 pbf.doc 1 版本11 (ing)4 1.1 规划h5本地缓存系列 4 1.2 Android版本app4 1.3 双类别系统, ...
- JQuery和html+css实现鼠标点击放烟花
<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content= ...
随机推荐
- Css文字在div中自动换行
Css文字在div中自动换行 word-break:break-all; 文字在div中字段换行
- chartjs显示数值标签插件:chartjs-plugin-datalabels
Getting Started #Installation #npm npm install chartjs-plugin-datalabels --save This plugin can al ...
- 日志实时收集之FileBeat+Kafka
之前,我们的某一个业务用于实时日志收集处理的架构大概是这样的: 在日志的产生端(LogServer服务器),都部署了FlumeAgent,实时监控产生的日志,然后发送至Kafka.经过观察,每一个 ...
- JavaScript笔记(5)
1.DOM操作 常用的DOM操作 document.getElementById(id); //返回指定id的元素,通用 document.getElementsByTagName(tagName); ...
- 处理器拦截器(HandlerInterceptor)详解(转)
简介 SpringWebMVC的处理器拦截器,类似于Servlet开发中的过滤器Filter,用于处理器进行预处理和后处理. 应用场景 1.日志记录,可以记录请求信息的日志,以便进行信息监控.信息统计 ...
- 【51nod2026】Gcd and Lcm(杜教筛)
题目传送门:51nod 我们可以先观察一下这个$f(x)=\sum_{d|x}\mu(d) \cdot d$. 首先它是个积性函数,并且$f(p^k)=1-p \ (k>0)$,这说明函数$f( ...
- 学习笔记:安装swig+用SWIG封装C++为Python模块+SWIG使用说明
这段时间一直在摸索swing,用它来封装C++代码来生成python脚步语言.并总结了swing从安装到配置再到代码封装编译生成动态库的整个过程,下面这篇文章都是我在实际的运用中的一些经验总结,分享给 ...
- jenkins 持续集成笔记2 --- 构建 Java 项目
先说一下流程: jenkins 从 gitlab pull 代码,使用 maven 打包,然后备份原来的jar包,使用rsync同步到服务器上,重启服务. pipeline 资源去看官方中文文档 ht ...
- Fiddler抓包HTTPS捕捉旧版App
“现在可以公开的情报:简易操作Fiddler抓包可能” 任何App的更新都限于苹果开发者规定,有时为了上架不得已放弃一些真正实用的功能,比如视频音频的直接下载,脚本的直接导入,手机上IPA的直接安装等 ...
- How to export Overload functions from DLL?
Library that exports functions library liba; procedure F(X: Integer); stdcall; overload; begin end; ...