JavaScript实现HTML5烟花特效
2013-10-07 23:35
639 查看
烟花效果如下(请使用支持HTML5的浏览器查看):
点击这里查看效果:http://keleyi.com/keleyi/phtml/html5/14.htm
源代码如下:
原文:http://keleyi.com/a/bjac/3pipmkmg.htm
触须:http://keleyi.com/a/bjac/k3pi4ehx.htm
web前端:/article/4797642.html
点击这里查看效果:http://keleyi.com/keleyi/phtml/html5/14.htm
源代码如下:
<style>canvas{background-color:#000000;;z-index:9999;}</style> <canvas id="canvas-keleyi-com"></canvas> <script> var c = document.getElementById('canvas-ke'+'leyi-com'); if (!c.getContext) alert('请使用支持HTML5的浏览器,例如Chrome,IE9以上。'); else(function(c, cvs) { //随着窗口调整画布大小 var W, H; var up = 0; //(onresize = function() { // c.width = W = window.innerWidth; // c.height = H = window.innerHeight; // })(); c.width=W=616; c.height=H=400; //生成一个烟花 function createPT(x, y, r, g, b) { return { r: r,g: g,b: b, x: x,y: y, //轨迹序列 pl: [], dx: rnd(20) - 10, dy: rnd(10) - 7, life: 30 + rnd(30), //移动函数,修改加速度和坐标 move: function() { this.dx *= .98; this.dy *= .98; this.dy += .22; this.x += this.dx; this.y += this.dy; this.pl.push([this.x, this.y]); //保持轨迹长度 if (this.pl.length > 10) this.pl.shift(); this.life--; } }; } //总烟火数组 var B = []; //在x,y位置创建一个烟火 function createBoom(x, y) { var q = [], r = rnd(255) | 0, g = rnd(255) | 0, b = rnd(255) | 0; for (var i = 0; i < rnd(16) + 15; i++) q.push(createPT(x, y, r, g, b)); B.push(q); } setInterval(function() { cvs.clearRect(0, 0, W, H); //依次绘制烟火 for (var n = 0; n < B.length; n++) { var q = B ; for (var i = 0; i < q.length; i++) { var pt = q[i]; pt.move(); dq(pt.pl, pt.life / 30, pt.r, pt.g, pt.b); //超过生存周期就消失 柯 乐 义 if (pt.life <= 0) q.splice(i, 1); } //当一个烟火包含的烟花个数为零,则消灭这个烟火 if (!B .length) B.splice(n, 1); } //每隔一段时间添加一个新烟火 if (new Date - up < 2000 + rnd(2000)) return; up = new Date; createBoom(rnd(W / 2) + W / 4, rnd(50) + 50); },20); function rnd(n) { return (n || 1) * Math.random(); } function dq(ar, z, r, g, b) { cvs.save(); //绘制轨迹。思路是每次都绘制一条透明的轨迹,叠加起来形成一条渐变的样子 for (var i = 0; i < ar.length; i++) { cvs.strokeStyle = 'rgba(' + r + ',' + g + ',' + b + ',' + Math.abs(.2 * z) + ')'; cvs.lineWidth = Math.min(i + 1, 4)*2; cvs.beginPath(); cvs.moveTo(ar[i][0], ar[i][1]); for (var j = i + 1; j < ar.length; j++) cvs.lineTo(ar[j][0], ar[j][1]); cvs.stroke(); } cvs.restore(); } })(c, c.getContext('2d'));</script>
原文:http://keleyi.com/a/bjac/3pipmkmg.htm
触须:http://keleyi.com/a/bjac/k3pi4ehx.htm
web前端:/article/4797642.html
相关文章推荐
- 几篇关于javascript的好文章,收藏
- JSP程序开发学习笔记1
- [JavaScript]截断字符串,解决中文1个字只算了1个字符的问题
- 初识MVC框架
- async.js源码阅读笔记
- c# list集合转换成json数据
- 用EL和JSTL进行View层开发
- <一>初探js特效魅力之全选不选反选04
- JavaScript中的if...else if...语句
- JavaScript 垃圾回收
- JavaScript计算三角形面积
- Javascript+HTML若干注意事项
- PureMVC(JS版)源码解析(六):MacroCommand类
- 转:Javascript异步编程的4种方法
- js的简单模板解析
- 图解Javascript引用类型之数组
- <一>初探js特效魅力之选项卡05
- Jsp学习笔记
- 起步X5 UI模型使用的新的JAVASCRIPT UI库 DHTMLX (简称DHX)
- 在javascript中使用json