烟花效果如下（请使用支持HTML5的浏览器查看）：
点击这里查看效果：http://keleyi.com/keleyi/phtml/html5/14.htm
源代码如下：
1 <style>canvas{background-color:#000000;;z-index:9999;}</style> 2 <canvas id="canvas-keleyi-com"></canvas> 3 <script> 4 var c = document.getElementById('canvas-ke'+'leyi-com'); 5 if (!c.getContext) alert('请使用支持HTML5的浏览器，例如Chrome，IE9以上。'); 6 else(function(c, cvs) { 7 //随着窗口调整画布大小 8 var W, H; 9 var up = 0; 10 //(onresize = function() { 11 // c.width = W = window.innerWidth; 12 // c.height = H = window.innerHeight; 13 // })(); 14 c.width=W=616; 15 c.height=H=400; 16 //生成一个烟花 17 function createPT(x, y, r, g, b) { 18 return { 19 r: r,g: g,b: b, 20 x: x,y: y, 21 //轨迹序列 22 pl: [], 23 dx: rnd(20) - 10, 24 dy: rnd(10) - 7, 25 life: 30 + rnd(30), 26 //移动函数，修改加速度和坐标 27 move: function() { 28 this.dx *= .98; 29 this.dy *= .98; 30 this.dy += .22; 31 this.x += this.dx; 32 this.y += this.dy; 33 this.pl.push([this.x, this.y]); 34 //保持轨迹长度 35 if (this.pl.length > 10) this.pl.shift(); 36 this.life--; 37 } 38 }; 39 } 40 //总烟火数组 41 var B = []; 42 //在x,y位置创建一个烟火 43 function createBoom(x, y) { 44 var q = [], 45 r = rnd(255) | 0, 46 g = rnd(255) | 0, 47 b = rnd(255) | 0; 48 for (var i = 0; i < rnd(16) + 15; i++) q.push(createPT(x, y, r, g, b)); 49 B.push(q); 50 } 51 setInterval(function() { 52 cvs.clearRect(0, 0, W, H); 53 //依次绘制烟火 54 for (var n = 0; n < B.length; n++) { 55 var q = B[n]; 56 for (var i = 0; i < q.length; i++) { 57 var pt = q[i]; 58 pt.move(); 59 dq(pt.pl, pt.life / 30, pt.r, pt.g, pt.b); 60 //超过生存周期就消失 柯 乐 义 61 if (pt.life <= 0) q.splice(i, 1); 62 } 63 //当一个烟火包含的烟花个数为零，则消灭这个烟火 64 if (!B[n].length) B.splice(n, 1); 65 } 66 //每隔一段时间添加一个新烟火 67 if (new Date - up < 2000 + rnd(2000)) return; 68 up = new Date; 69 createBoom(rnd(W / 2) + W / 4, rnd(50) + 50); 70 },20); 71 function rnd(n) { 72 return (n || 1) * Math.random(); 73 } 74 function dq(ar, z, r, g, b) { 75 cvs.save(); 76 //绘制轨迹。思路是每次都绘制一条透明的轨迹，叠加起来形成一条渐变的样子 77 for (var i = 0; i < ar.length; i++) { 78 cvs.strokeStyle = 'rgba(' + r + ',' + g + ',' + b + ',' + Math.abs(.2 * z) + ')'; 79 cvs.lineWidth = Math.min(i + 1, 4)*2; 80 cvs.beginPath(); 81 cvs.moveTo(ar[i][0], ar[i][1]); 82 for (var j = i + 1; j < ar.length; j++) cvs.lineTo(ar[j][0], ar[j][1]); 83 cvs.stroke(); 84 } 85 cvs.restore(); 86 } 87 })(c, c.getContext('2d'));</script>
原文：http://keleyi.com/a/bjac/3pipmkmg.htm
