H5+CSS--雨滴特效
阿新 • • 發佈：2018-11-11
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Rain</title> <style> body,html{margin:0px;height:100%;} ul,ol{margin:0;padding:0;list-style:none;} a{text-decoration:none;} img{border:none;} canvas{background:#000;display: block;} </style> </head> <body> <canvas id="canvas">您的瀏覽器不支援canvas標籤，請更換瀏覽器！</canvas> <script> // window.requestAnimFram = (function(){ // // return // })(); var can = document.getElementById('canvas'); var cxt = can.getContext('2d'); // 獲取瀏覽器視窗寬高，並設定canvas全屏顯示（必須給canvas設定寬高，否則會採用預設寬高，對後面繪圖的座標都難以控制（座標和寬高都難以控制）） var w = can.width = window.innerWidth; var h = can.height = window.innerHeight; // 寬高響應式設定 window.onresize = function(){ w = can.width = window.innerWidth; h = can.height = window.innerHeight; console.log(w+' -- '+w/50) } // cxt.fillStyle='#f00'; // cxt.fillRect(100,100,50,50);//繪製矩形 前兩個是座標xy,後面兩個是寬高 // cxt.fill(); 填充方法（實心） // cxt.stroke();觸筆方法（空心） // cxt.rect(x,y,w,h);規定矩形的路徑 // cxt.fill()和cxt.rect()可以用cxt.fillRect()代替 // cxt.arc(x,y,r,0,Math.PI*2,false); xy圓心座標 r半徑 0和Math.PI*2弧度 false逆時針 // cxt.arc(250,250,50,0,Math.PI*2,false); // cxt.fill(); // var x=100,y=0; /*setInterval(function(){ y++; cxt.clearRect(0,0,w,h); cxt.fillRect(x,y,50,50) },1000/60);//1000/60相容一般顯示卡*/ // move();//分號是語句結束的標記，js末尾建議帶上分號，考慮效能問題。 // function move(){ // y++; // cxt.clearRect(0,0,w,h); // cxt.fillRect(x,y,50,50); // requestAnimationFrame(move);//原生js的經動畫，需要考慮相容 // } // 面相對像 var drops = [];//雨滴陣列 // 建立雨滴物件 function Drop(){}; Drop.prototype = { init:function(){//初始化方法（設定每個雨滴的初始屬性） this.x = random(0,w); this.y = 0; // y方向的速度值 this.vy = random(4,5); // 雨滴下落的最大y值 this.l=random(0.8*h,0.9*h); this.r=1;// 新增波紋初始半徑 this.vr=1;// 波紋半徑增大的速度 this.a = 1;// 判斷雨滴消失的透明度 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 = 'rgb(0,255,255)'; cxt.stroke(); }else{//繪製下落的雨滴 cxt.fillStyle = 'rgb(0,255,255)'; cxt.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.01){ this.r += this.vr; if(this.r > 30 ){//當半徑大於50後，透明度會越來越大 this.a *= this.va; } }else{ this.init();//雨滴重新初始化 } } }, } // 生成隨機數的方法 function random(min,max){ return Math.random()*(max-min)+min;//min-max之間的隨機數 } // 例項化物件 // var drop = new Drop(); // drop.init();//初始化 // drop.draw();//繪製 for(var i=0;i<30;i++){ setTimeout(function(){ var drop = new Drop(); drop.init(); drops.push(drop);//新增到雨滴陣列 },i*300) } // console.log(drops) move(); function move(){ // cxt.clearRect(); // 先繪製透明層，再繪製雨滴，雨滴就把先把先繪製的透明層覆蓋，若干透明層疊加起來，就會越來也不透明 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); } </script> </body> </html>