前端工程師用原生javascript開發流星雨特效
阿新 • • 發佈：2019-01-30
效果知識點：canvas高階繪圖標籤API運用，陣列方法，js邏輯思維，程式碼效能優化等。自己動手來製作一下吧。
流星雨特效原始碼：
<!doctype html><!--宣告文件型別：html--> <html lang="en"> <head><!--頭部--> <metacharset="UTF-8"><!--字元編碼:utf-8國際編碼--> <metaname="Keywords"content="關鍵詞1,關鍵詞2"><!--關鍵詞--> <metaname="Description"content="描述"><!--描述--> <title>流星雨</title><!--網頁標題--> <style> *{ margin:0; padding:0; } #canvas{ background:#000; display:block; } </style> </head> <body><!--身體--> <canvasid="canvas">您的瀏覽器不支援cnavas繪圖，請您更換瀏覽器!!</canvas> <script> var can = document.getElementById("canvas"); var ctx = can.getContext("2d");//設定繪圖環境 var w = can.width =window.innerWidth;//把視窗的寬度賦值給畫布 var h = can.height =window.innerHeight;//把視窗的高度賦值給畫布 var count = 30;//雨滴的個數 var drops = [];//定義一個空陣列來儲存雨滴個數 //瀏覽器視窗改變的時候重新獲取寬度 window.onresize =function(){ w = can.width = window.innerWidth; h = can.height = window.innerHeight; } function Drop(){}//定義雨滴物件 //新增原型物件方法 Drop.prototype = { init : function(){//初始化 this.x =random(0,w); this.y =0; this.r =1;//初始半徑 this.vy =random(4,5);//豎直方向的加速度 this.vr =1;//半徑的加速度 this.a =1;//初始透明度 this.va =0.96;//透明度的變化係數 this.l =random(h*0.8,h*0.9);//雨滴下落的高度 }, draw : function(){ if (this.y >this.l) { ctx.beginPath(); ctx.arc(this.x,this.y,this.r,0,2*Math.PI,false); ctx.strokeStyle ="rgba(0,255,255,"+this.a+")"; ctx.stroke(); }else{ ctx.fillStyle =color(this.a); 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(); } } } } //不斷的更新雨滴位置 function move(){ ctx.fillStyle ="rgba(0,0,0,.1)"; ctx.fillRect(0,0,w,h);//這個在先繪製 for (vari=0;i<drops.length;i++ ) { drops[i].draw(); } //呼叫經動畫 requestAnimationFrame(move); } //建立一個雨滴例項物件 //var drop = new Drop(); //drop.init(); //drop.draw(); //延遲產生每個雨滴 function setup(){ for (vari=0;i <count ;i++ ) { (function(j){ setTimeout(function(){ var drop = new Drop(); drop.init(); drops.push(drop); },j*200); }(i)) } } setup(); move(); //封裝一個產生隨機數的方法 function random(min,max){ return Math.random()*(max-min) +min; } //封裝一個隨機顏色 function color(a){ //rgba var r = Math.floor(Math.random()*255); var g = Math.floor(Math.random()*255); var b = Math.floor(Math.random()*255); return "rgba("+r+","+g+","+b+","+a+")" } </script> </body> </html>
web前端學習群：575308719，分享原始碼、視訊、企業級案例、最新知識點，歡迎初學者和在進階中的小夥伴。
關注公眾號→‘學習web前端’跟大佬一起學前端！