需求：在一个虚拟烟花球中，在不同的部位填充不同颜色、质地的烟花火药；观看试放效果。最好能结合点物理学定律（以便展现火药粉被爆炸扩散到一定程度再爆炸的效果）

这是这学期的一个作业，感觉挺无聊的，纯粹是老师个人想法，一开始还不明白烟花球不同部位填充不同烟花火药会和烟花绽放的效果有什么关系，等到中期审查问老师被老师鄙视了，老师举例上下左右填充不同的烟花会有不同的颜色不同的效果。要求不能用Flash，那就用Html5咯，按照要求去实现。

　　自己胡思乱想做了三种奇怪的效果，分别是线条、点、圆环、曲线，上下左右都可以选择不同样式以及不同的颜色效果，中间选择的颜色是烟花轨迹线条的颜色，效果图如下。

　　

　　基本实现了，但是存在很多问题，首先是性能问题，感觉不够流畅，其次是浏览器兼容问题，老版本的浏览器播放不了，只有在Chrome和Opera下播放效果才最佳，代码存在很多问题，有待优化。

　　代码下载地址

　　http://files.cnblogs.com/stwzhong/MyFireworks.rar

HTML5 烟花系统的更多相关文章

  1. JavaScript实现HTML5烟花特效

    烟花效果如下(请使用支持HTML5的浏览器查看):点击这里查看效果:http://keleyi.com/keleyi/phtml/html5/14.htm 源代码如下: ;}</style> ...

  2. HTML5 Canvas 超炫酷烟花绽放动画教程

    这是一个很酷的HTML5 Canvas动画,它将模拟的是我们现实生活中烟花绽放的动画特效,效果非常逼真,但是毕竟是电脑模拟,带女朋友看就算了,效果还是差了点,呵呵.这个HTML5 Canvas动画有一 ...

  3. HTML5 Canvas 超逼真烟花绽放动画

    各位前端朋友们,大家好!五一假期即将结束,在开启加班模式之前,我要给大家分享一个超酷超逼真的HTML5 Canvas烟花模拟动画.这次升级版的烟花动画有以下几个特点: 烟花绽放时,将展现不同的色彩,不 ...

  4. 精选19款华丽的HTML5动画和实用案例

    下面是本人收集的19款超酷HTML5动画和实用案例,觉得不错,分享给大家. 1.HTML5 Canvas火焰喷射动画效果 还记得以前分享过的一款HTML5烟花动画HTML5 Canvas烟花特效,今天 ...

  5. 精妙无比 8款HTML5动画实例及源码

    1.jQuery垂直带小图标菜单导航插件 今天我们要来分享一款jQuery菜单插件,这款jQuery菜单是垂直的样式,鼠标滑过菜单项时会出现一个背景,菜单项的右侧也会出现一个小箭头.另外值得注意的是, ...

  6. HTML5/jQuery动画应用 3D视觉效果

    今天我们要来分享几款很酷的HTML5/CSS3动画应用,虽然不是HTML5 3D应用,但也有3D的视觉效果.HTML5结合jQuery,让网页应用变得更加强大了.一起来看看这些HTML5/jQuery ...

  7. 8个超震撼的HTML5和纯CSS3动画源码

    HTML5和CSS3之所以强大,不仅因为现在大量的浏览器的支持,更是因为它们已经越来越能满足现代开发的需要.Flash在几年之后肯定会消亡,那么HTML5和CSS3将会替代Flash.今天我们要给大家 ...

  8. 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 双类别系统, ...

  9. JQuery和html+css实现鼠标点击放烟花

    <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content= ...

随机推荐

  1. Web API与MVC控制器的区别

    Web API属于ASP.NET核心平台的一部分,它利用MVC框架的底层功能方便我们快速的开发部署WEB服务.我们可以在常规MVC应用通过添加API控制器来创建web api服务,普通MVC应用程序控 ...

  2. 【php设计模式】策略模式

    策略模式是针对一组算法,将每一种算法都封装到具有共同接口的独立的类中,从而是它们可以相互替换.策略模式的最大特点是使得算法可以在不影响客户端的情况下发生变化,从而改变不同的功能. <?php i ...

  3. Linux内核的arch目录

  4. Dart的导包

    Dart中的库主要有三种: 1.我们自定义的库 import 'lib/xxx.dart'; 2.系统内置库 import 'dart:math'; import 'dart:io'; import ...

  5. STM32TIM定时器的影子寄存器

    1.简介 在STM32基本定时器的PSC预分频寄存器和ARR自动装载寄存器都有影子寄存器. 我们可以看到基本定时器功能框图上对应的寄存器有影子~ 2.功能 影子寄存器的存在起到一个缓冲的作用. 设置影 ...

  6. ASP.config配置

    使用ASP.NET搭建三层时候, 有Model (模型)DAL(数据访问层)    BLL(业务逻辑层)  连接数据库的DBhelper 放在DAL层 假如 你数据库密码改了,你要打开VS 找到DBh ...

  7. Java中Static关键字详解以及静态变量和成员变量的区别

    一.static关键字的特点 (1)修饰成员变量.成员方法(2)随着类的加载而加载(3)优先于对象存在(4)被所有对象共享(5)可以通过类名调用 它本身也可以通过对象名调用 例如:main()方法由j ...

  8. python之命令行可以做的事儿

    前言 说起python,大家都知道可以做很多有趣的事儿.知乎.CSDN上很多大牛做过很多或高大上或实用的事儿.参见这篇文章Python趣味代码整合之提升学生编程兴趣, 另外,我发现命令行也可以做很多事 ...

  9. JAVA8初探-让方法参数具备行为能力并引入Lambda表达式

    关于JAVA8学习的意义先来贴一下某网站上的对它的简单介绍:“Java 8可谓Java语言历史上变化最大的一个版本,其承诺要调整Java编程向着函数式风格迈进,这有助于编写出更为简洁.表达力更强,并且 ...

  10. HashSet怎样保证元素不重复

    文章同步更新在个人博客:HashSet怎样保证元素不重复 都知道HashSet中不能存放重复元素,有时候可以用来做去重操作等.但是其内部是怎么保证元素不重复的呢?下面从源码去看看. 打开HashSet ...