1. 程式人生 > >js實現雨滴特效

js實現雨滴特效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="{CHARSET}">
		<title></title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		html,body{
			width: 100%;
			height: 100%;
		}
		canvas{			
			background-color: black;
			display: block;
		}
		
	</style>
	<body>
		<canvas id="canvas">
			
			ni hao
		</canvas>
		
		<script>
			var can=document.getElementById("canvas");
			//設定繪圖環境
			var cxt=can.getContext("2d");
			
			var w=can.width=window.innerWidth;
			var h=can.height=window.innerHeight;
			//讓畫布的寬高跟隨瀏覽器變化
			window.onresize=function(){
			var w=can.width=window.innerWidth;
			var h=can.height=window.innerHeight;
			}
			/*//設定畫筆顏色
			//cxt.fillStyle="red";
			//繪製圖形
			//cxt.fillRect(0,0,50,50);//x,y,寬,高
			//cxt.fill();填充方法(實心) cxt.stroke();觸筆方法(空心)
			//設定圓形的路徑
			//cxt.arc(250,250,4,0,Math.PI*2,false);//圓心座標X,Y 半徑r,從0度,弧度(math.pi*角度、180)
			//cxt.fill();*/
			var x=100,y=0;
			/*setInterval(function(){
				y++;
				//清除
				cxt.clearRect(0,0,w,h);
				cxt.fillRect(x,y,50,50);
				
			},10);*/
			/*function move(){
				y++;
				cxt.clearRect(0,0,w,h);
				cxt.fillRect(x,y,50,50);
				requestAnimationFrame(move);//原生js的動畫
				
			}
			move();*/
			
			//面向物件
			//建立雨滴物件
			var drops=[];
			function Drop(){}
				//新增物件方法
				Drop.prototype={
					init:function(){
						//初始化方法:設定每個雨滴的初始屬性
						this.x=random(0,w);
						this.y=0;
						//y方向的速度值
						this.vy=random(2,3);
						
						//最大高度
						this.l=random(0.8*h,0.9*h);
						//波紋的半徑
						this.r=1;
						this.vr=1;
						//判斷雨滴消失的透明度
						this.a=1;//趨向於0
						this.va=0.96;//透明度的變化係數
						
									
					},
					draw:function(){//繪製圖形
						if(this.y>this.l)
						{
							cxt.beginPath();//先開始路徑
							cxt.arc(this.x,this.y,this.r,0,Math.PI*2,false);
							cxt.strokeStyle="rgba(0,255,255,"+this.a+")";
							cxt.stroke()
						}
						else
						{
							cxt.fillStyle="rgb(0,255,255)";
							cxt.fillRect(this.x,this.y,2,2);
						}
						
						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 drop=new Drop();
				drop.init();
				drop.draw();*/
			
			/*function dd(){for (var i=0;i<30;i++) {
				var drop=new Drop();
				drop.init();
				//drop.draw();
				drops.push(drop);
			}
			requestAnimationFrame(dd);
			}
			dd();	*/
			
			for (var i=0;i<30;i++) {
				setTimeout(function(){
					var drop=new Drop();
				drop.init();
				//drop.draw();
				drops.push(drop);
				},i*200);
				
			}
			function move(){
				//先繪製透明層再繪製雨滴,雨滴把先繪製的雨滴覆蓋
				cxt.fillStyle="rgba(0,0,0,0.1)";				
				cxt.fillRect(0,0,w,h);
				for (var i=0;i<drops.length;i++) {
				drops[i].draw();
			}
				requestAnimationFrame(move);
			}
			move();
			
			//生成隨機數的方法
			function random(min,max){
				return Math.random()*(max-min)+min;
			}
		</script>
	</body>
</html>