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

　　这是一个很酷的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(){
2. self.dt = 0;
3. self.oldTime = Date.now();
4. self.canvas = document.createElement('canvas');
5. self.canvasContainer = $('#canvas-container'); var canvasContainerDisabled = document.getElementById('canvas-container');
6. self.canvas.onselectstart = function() { return false;
7. };
9. self.canvas.width = self.cw = 600;
10. self.canvas.height = self.ch = 400;
12. self.particles = [];
13. self.partCount = 30;
14. self.fireworks = [];
15. self.mx = self.cw/2;
16. self.my = self.ch/2;
17. self.currentHue = 170;
18. self.partSpeed = 5;