使用canvas实现的网页背景动画

redTreeOnWall 2016-03-30 11:20:59

有时候为一个网页添加一个动画效果的背景，会让网页增加一定的韵味，是网页看起来与众不同。
我在最近学习前端开发的过程中，产生了用canvas做一个动态的网页背景的想法，并写了一个简单的动画程序，并将canvas设为我的一个网页的背景，这是我的网页：http://www.lirunlong.com/SSHChem/webMes/，在此将制作过程分享给大家。
基本思路：
1，创建一个<canvas>元素，并将它的css属性中的z-index属性设为一个负值，同时设置css的position属性为 fixed;这样，<canvas>便能够总是处在网页的最底层。
2，读取页面的宽度和高度，并将canvas的高度和宽度设置成页面的宽度和高度，这样，背景就会充满页面了。
3，为canvas编写动画程序。

我的制作过程：
首先，在网页添加一个canvas标签。



<canvas id="canvas" >

	您的浏览器不支持HTML5 canvas，请换一个浏览器。

</canvas>

css属性：



#canvas{

	position: fixed;

	z-index:-1;

}

为了方便获取页面的大小，我的html标签的属性写成这样：

<html id = "h" style="background-color: #000000;width:100%;height:100%">

接着便是js代码：



 //获取html（id=“h”）标签对象。

var h = document.getElementById("h");

//宽度

var wi;

//高度

var he;

wi = h.offsetWidth;

he = h.offsetHeight;



//获取canvas

var canv = document.getElementById("canvas");

//设置高度和宽度

canv.width = wi;

canv.height = he;

var c = canv.getContext("2d");



//计时器组件

var timeObj = {

	//上一帧的时间

	deltTime:0,

	//上次更新的时刻

	lastUpDateTime:Date.now(),

	

	//时间对象更新，用于计算上一帧的时间；

	update:function(){

		//计算上一帧的时间；

		this.deltTime = Date.now() - this.lastUpDateTime;

		//纪录此次更新的时刻

		this.lastUpDateTime = Date.now();

	}

}



//用于得到一个新的随机的“rain”对象的函数

var newRain = function() {

	//创建rain对象；

	var rain = {

		//pos:rain在屏幕中的位置属性

		pos : {

			x : 0,

			y : 0,

		},

		//rain的速度

		speed : 0,

		//加速度

		a : he,

		//rain的长度

		l : 10,

		//rain的宽度

		w : 5,

		//rain的颜色

		col : "#888888",

		//行为，坠落

		drop : function() {

			//根据速度和上一帧的时间间隔计算位移。

			this.pos.y = this.pos.y + timeObj.deltTime / 1000 * this.speed;

			//判断是否运动到了屏幕边界以下，如果是，则对象将会初始化()

			if(this.pos.y > he){

				this.setRandom();

			}

		},

		//行为，将rain绘制在屏幕

		draw : function() {

			c.fillStyle = this.col;

			c.fillRect(this.pos.x, this.pos.y, 5, this.l);

		},

		//行为，初始化，即设置rain的初始位置，速度，长度，颜色等为某范围的随机值。

		setRandom : function() {

			//随机的初始位置。

			this.pos.x = Math.random() * wi;

			this.pos.y = 0 - Math.random() * he;

			//随机的速度

			this.speed = 0.1 * he + Math.random() * he;

			//随机的长度

			this.l = 0.05 * he + Math.random() * (0.1 * he);

			//随机的rgb

			var r = Math.random() * 255;

			var g = Math.random() * 255;

			var b = Math.random() * 255;

			g = Math.floor(g);

			r = Math.floor(r);

			b = Math.floor(b);

			this.col = "rgb(" + r + "," + g + "," + b + ")";

		}

	}

	//初始化

	rain.setRandom();

	//返回已经初始化的rain

	return rain;

}



//所有创建的rain在rainsObj中统一管理

var rainsObj = {

	//程序中同时存在的rain的数量

	number:20,

	//所有的创造的rain对象都将装在这个数组里

	rainsArr:[],

	//创造一定数目(number)的rain

	creatRains:function(){

		for(var i = 0;i<rainsObj.number;i++){

			rainsObj.rainsArr[i] = newRain();

		}

	},

	//调用每一个rain对象的drop()

	rainsDrop:function(){

		for(var i = 0;i<rainsObj.number;i++){

			rainsObj.rainsArr[i].drop();

		}

	},

	//绘制每一个rain对象

	drawRains:function(){

		for(var i = 0;i<rainsObj.number;i++){

			rainsObj.rainsArr[i].draw();

		}

	}

	//

}



//帧率

var fpsObj = {

	fps:0,

	fpsRememberTime:0,

	workOutFps:function(){

		if (Date.now() - fpsObj.fpsRememberTime > 500) {

			fpsObj.fpsRememberTime = Date.now();

			fpsObj.fps = Math.floor(1000 / timeObj.deltTime);

		}

	},

	drowFPS:function(){

		c.fillStyle = "#ff0000";

		c.fillText("fps:" + fpsObj.fps, 0, 5 + wi / 20);

	}

}



//模型更新，每帧调用

var update = function() {

	//计时器更新

	timeObj.update();

	//所有rain运动

	rainsObj.rainsDrop();

	//计算fps

	fpsObj.workOutFps();

}



//视图更新，每帧调用

var paint = function() {

	//绘制背景

	c.fillStyle = "#000000";

	c.fillRect(0, 0, wi, he);



	//绘制每一个rain对象

	rainsObj.drawRains();

	

	//绘制帧率

	fpsObj.drowFPS();

	

}



//主函数

var main = function() {

	update();

	paint();

	setTimeout(main, 16);

}

//=============================================





//创造所有的rain

rainsObj.creatRains();

//启动主函数

main();

这段代码的大致流程是：连续调用调用若干次newRain()，生成若干数量的rain对象（即动画中的由上向下坠落的彩色条形图案），接着由主函数进入循环update（），根据两帧动画的时间差和rain的速度计算出每一个rain对象在canvas中的位置，并通过paint（）绘制在画布上。形成动画效果。

效果：http://www.lirunlong.com/SSHChem/webMes/

...全文