js代码

<script type="text/javascript">
		var can = document.getElementById("canvas");
		//设置2d绘图环境
		var ctx = can.getContext("2d");

		//获取浏览器窗口的宽高
		var w = can.width = window.innerWidth,
			h = can.height = window.innerHeight;
		//自适应浏览器窗口
		window.onresize = function () {
			w = can.width = window.innerWidth,
				h = can.height = window.innerHeight;
		}
		//         ctx.fillStyle="yellow"
		//       ctx.fillRect(100,100,100,100);
		//       //  绘制圆形
		//    ctx.arc(250,250,50,0,Math.PI*2,false);
		//    ctx.strokeStyle="yellow";
		//    ctx.stroke();
		// //运动
		// var y=0;
		// setInterval(function(){
		// y++;
		// ctx.clearRect(0,0,w,h);
		// ctx.fillRect(100,y,100,100);
		// },30);
		function Drop() {}; //创建雨滴类
		Drop.prototype = {
			init: function () {
				this.x = rand(0, w); //雨滴的初始化坐标
				this.y = 0; //雨滴y轴方向的坐标
				this.vy = rand(8, 9); //雨滴下落的速度
				this.l = rand(h * 0.8, h * 0.9); //雨滴下落的高度
				this.r = 1;
				this.vr = 1; //半径增加的速度
				this.a = 1;
				this.va = 0.98; //透明度的变化系数
			},
			draw: function () //绘制雨滴
			{
				if (this.y > this.l) {
					//绘制圆形
					ctx.beginPath(); //开始路径
					ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
					ctx.strokeStyle = "rgba(255,255,255," + this.a + ")";
					ctx.stroke();

				} else {
					//绘制下落的雨滴
					ctx.fillStyle = "rgb(255,255,255)";
					ctx.fillRect(this.x, this.y, 2, 10);
				}
				this.update();
			},
			update: function () //更新坐标
			{
				if (this.y < this.l) {
					this.y += this.vy;
				} else {
					if (this.a > 0.03) {
						this.r += this.vr;
						if (this.r > 50) {
							this.a *= this.va;
						}
					} else {
						//重新初始化了
						this.init();
					}
				}
			}
		}
		//实例化一个雨滴对象
		var drops = []; //默认值为undefined
		//console.log(drops)
		for (var i = 0; i < 30; i++) {
			setTimeout(function () {
				var drop = new Drop();
				drop.init();
				drops.push(drop);
			}, i * 200)
		}
		//实例初始化
		setInterval(function () {
			//绘制一个透明层
			ctx.fillStyle = "rgba(56,163,179,0.1)";
			ctx.fillRect(0, 0, w, h);
			for (var i = 0; i < drops.length; i++) {
				drops[i].draw();
			}
		}, 30);

		function rand(min, max) {
			return Math.random() * (max - min) + min;
		}
	</script>