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

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

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

　　HTML代码：

1. <div id=”gui”></div>  
2. <div id=”canvas-container”> <div id=”mountains2″></div>    
3. <div id=”mountains1″></div><div id=”skyline”></div> </div>  

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

　　CSS代码：

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;   
2. } canvas { cursor: crosshair; display: block; position: relative; z-index: 3;   
3. } canvas:active { cursor: crosshair;   
4. } #skyline { background: url(skyline.png) repeat-x 50% 0; bottombottom: 0; height: 135px; left: 0; position: absolute; width: 100%; z-index: 1;       
5. } #mountains1 { background: url(mountains1.png) repeat-x 40% 0; bottombottom: 0; height: 200px; left: 0; position: absolute; width: 100%; z-index: 1;       
6. } #mountains2 { background: url(mountains2.png) repeat-x 30% 0; bottombottom: 0; height: 250px; left: 0; position: absolute; width: 100%; z-index: 1;       
7. } #gui { rightright: 0; position: fixed; top: 0; z-index: 3;   
8. }  

　　CSS代码没什么特别，主要也就定义一下背景色和边框之类的。

　　接下来是最重要的Javascript代码。

　　Javascript代码：

1. self.init = function(){     &nb