html5-烟火代码,Css代码库,德仔网

代码语言

代码分类

【Css】 html5-烟火

作者:雾海树妖 / 发布于2013/7/19/ 1006

其实这个效果我想很久了，只是之前一直没想明白那个轨迹尾巴怎么画。。虽然效果不算复杂，但是作为网页背景还是不错的


	<!-- code by 雾海树妖 2013/7/19 -->
	<!-- 转载请注明出处，尊重他人劳动成果，是每个地球人应有的品质 -->
	<!-- 有问题可以直接留言，我的qq:1696292264 -->
	<canvas style='background-color:#000000;position:absolute;left:0px;top:0px;'></canvas>
	<script>
	var c = document.getElementsByTagName('canvas')[0];
	if (!c.getContext) alert('Your browser is too old now!Change to chrome ok？');
	else(function(c, cvs) {
	//随着窗口调整画布大小
	var W, H;
	var up = 0; (onresize = function() {
	 c.width = W = window.innerWidth;
	 c.height = H = window.innerHeight;
	})();
	//生成一个烟花
	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 += .42;
	 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(6) + 5; 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[n];
	 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[n].length) B.splice(n, 1);
	 }
	 //每隔一段时间添加一个新烟火
	 if (new Date - up < 1000 + rnd(2000)) return;
	 up = new Date;
	 createBoom(rnd(W / 2) + W / 4, rnd(50) + 20);
	},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>

试试其它关键字

　烟火　

同语言下

可能有用的

雾海树妖贡献的其它代码(2)