js實現雨滴特效
阿新 • • 發佈:2018-12-18
<!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>