canvas基礎知識點參考各種文檔，直接上代碼，有非常詳細注釋
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canvas雨滴特效</title> <style> body{ margin: 0; overflow: hidden; } #rain{ display: block; background-color: #000; } </style> </head> <body> <canvas id="rain"></canvas> <script> //獲取canvas元素 const canvas = document.querySelector('#rain'); //設置canvas元素寬高的函數 var wX,wY; ~~function setSize(){ //監控窗口發生變化時自動調用setSize函數 window.onresize = arguments.callee; //獲取瀏覽器窗口寬高 wX = window.innerWidth; wY = window.innerHeight; //給canvas設置寬高 canvas.width = wX; canvas.height = wY; }(); //獲取繪制區域(相當於畫筆,可在canvas中任意位置繪制圖形) var ctx = canvas.getContext('2d'); //隨機產生兩個數之間隨機數 function random(min,max){ return Math.random()*(max-min) + min; } //生成雨滴的構造函數 function Rain(){}; //添加原型方法 Rain.prototype = { init : function(){ this.x = random(0,wX);//雨滴橫坐標 this.y = 0;//雨滴縱坐標默認從最上方下落 this.v = random(3,4);//雨滴每秒下落的速度 this.h = random(0.9*wY,wY);//下落到窗口高度的90%~100% this.r = 1;//雨滴綻放的初始半徑 this.vr = 0.4;//半徑擴大的速度 }, draw : function(){ if(this.y<this.h){//判斷是否在90%~100%之間 ctx.beginPath(); //抬筆作畫 ctx.fillStyle = '#666'; //內容實心用顏色填充 ctx.fillRect(this.x,this.y,4,8); //畫矩形小雨滴 }else{//不在區間則以下落到地綻放成圓 ctx.beginPath(); ctx.strokeStyle = '#666'; ctx.arc(this.x,this.y,this.r,0,Math.PI*2); ctx.stroke(); } }, move : function(){ if(this.y<this.h){//下落 this.y+=this.v;//每秒下落3~4滴的距離 }else{//綻放成圓 if(this.r<35){ this.r+=this.vr; }else{ this.init(); } } this.draw();//移動的雨滴畫出來 } } //生成的雨滴要添加動畫為方便找到存在數組中 var aRain = []; //創造雨滴函數 function createRain(num){ for(var i=0;i<num;i++){ setTimeout(function(){//每隔200毫秒生成一個 var rain = new Rain(); rain.init(); rain.draw(); aRain.push(rain); },200*i) } } createRain(50); //用定時器畫幀形成動畫 setInterval(function(){ // ctx.clearRect(0,0,wX,wY);//擦除上一個圖形(下雪的感覺) // 這里不是擦除雨滴效果是加蒙版達到漸變效果 ctx.fillStyle = 'rgba(0,0,0,0.05)'; ctx.fillRect(0,0,wX,wY); for(var item of aRain){ item.move(); } },1000/144);//根據自己屏幕刷新頻率設置(此處是144HZ) </script> </body> </html>
內容本人原創，有不足之處請見諒！歡迎指正！轉載請注明出處附上鏈接，謝謝！