結合canvas做雨滴特效
阿新 • • 發佈：2019-01-02
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>匯制雨滴</title> <style type="text/css"> *{ margin: 0; padding: 0; } canvas{ display: block; /*vertical-align: middle;*/ background: #000; } </style> </head> <body> <canvas id="canvas">您的瀏覽器不支援畫布，請您更換瀏覽器</canvas> </body> <script type="text/javascript"> var can = document.getElementById('canvas'); //設定2d繪圖 var ctx = can.getContext('2d') //獲取瀏覽器視窗的寬高 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; } //canvas繪製矩形 //設定矩形框的路徑 //ctx.rect(x,y,w,h); //xy 座標 wh寬高 //畫出來 //ctx.fill(); //填充方法 //stx.stroke(); //觸筆方法 空心的 // ctx.fillStyle = 'red'; // ctx.fillRect(100,100,100,100) // //繪製圓形 // ctx.arc(250,250,50,0,Math.PI*2,false) // ctx.strokeStyle = 'red'; // 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);//雨滴的初始X座標 this.y = 0;//雨滴的初始Y座標 this.vy = rand(4,5) //雨滴下落的速度 this.l = rand(0.8*h,0.9*h);//雨滴下落的最大高度 this.r = 1;//初始半徑 this.vr = 1; //半徑增大的速度 this.a = 1; //初始透明度 this.va = 0.9; //透明度變化係數 }, //繪製 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(0,255,255,'+ this.a + ')'; ctx.stroke(); }else{ //繪製下落的雨滴 //ctx.clearRect(0,0,w,h); ctx.fillStyle = 'rgba(0,255,255,1)' ctx.fillRect(this.x,this.y,2,10); } this.update(); }, //更新座標 update:function(){ //當y座標小於1高度的時候就一直累加 if (this.y<this.l) { this.y += this.vy; }else{ //圓形半徑增大 // if (this.r<50) { // this.r += this.vr; // }else{ // // } //判斷透明度 if (this.a>0.03) { this.r += this.vr; if (this.r > 50) { this.a *= this.va; } }else{ //重新初始化了 this.init() } } // this.y += this.vy; } } //例項化雨滴物件 // var drop = new Drop(); // drop.init(); var 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(0,0,0,0.1)'; ctx.fillRect(0,0,w,h) for (var i=0; i<drops.length; i++) { drops[i].draw() } // drop.draw() },1000/60); //幀數 function rand(min,max){ return Math.random()*(max-min) +min;//min~MAX } </script> </html>