返回
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
搜索

实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码

2019-01-28 16:48:10丽君

　　这是一个很酷的HTML5 Canvas动画，它将模拟的是我们现实生活中烟花绽放的动画特效，效果非常逼真，但是毕竟是电脑模拟，带女朋友看就算了，效果还是差了点，呵呵。这个HTML5 Canvas动画有一点比较出色，就是其性能，Chrome上基本没有卡的感觉，就算你放出很多烟花也一样。

　　下面我们来简单分析一下实现这款HTML5烟花特效的过程及代码，主要由HTML代码、CSS代码以及Javascript代码组成，当然javascript代码是最重要的。

　　HTML代码：

XML/HTML Code复制内容到剪贴板
  1. <div id=”gui”></div>   <div id=”canvas-container”> <div id=”mountains2″></div>    
  2. <div id=”mountains1″></div><div id=”skyline”></div> </div>  

　　HTML的结构非常简单，即构造了一个canvas容器，我们会利用JS在这个容器中生成一个Canvas对象。看最后的JS代码你就会知道了。

　　CSS代码：

CSS Code复制内容到剪贴板
  1. #canvas-container { background: #000 url(bg.jpg); height: 400px; left: 50%; margin: -200px 0 0 -300px; position: absolute; top: 50%; width: 600px; z-index: 2;    } canvas { cursor: crosshair; display: block; position: relative; z-index: 3;   
  2. } canvas:active { cursor: crosshair;    } #skyline { background: url(skyline.png) repeat-x 50% 0; bottombottom: 0; height: 135px; left: 0; position: absolute; width: 100%; z-index: 1;       
  3. } #mountains1 { background: url(mountains1.png) repeat-x 40% 0; bottombottom: 0; height: 200px; left: 0; position: absolute; width: 100%; z-index: 1;        } #mountains2 { background: url(mountains2.png) repeat-x 30% 0; bottombottom: 0; height: 250px; left: 0; position: absolute; width: 100%; z-index: 1;       
  4. } #gui { rightright: 0; position: fixed; top: 0; z-index: 3;    }  
相关文章 大家在看