主要思路：
-
注意：
canvas並不是所有部分都能繪制圖形，它像一個國畫卷軸一樣，可繪制部分只有宣紙部分。如果需要canvas畫布局域填充整個cnavas寬高，需要進行設置。
canvas是行內元素。行內元素如果等於瀏覽器寬高的話，會使瀏覽器出現滾動條，因為行內元素有行高，設置為塊級元素即可。
canvas有默認的寬高（300*150）
-
獲取canvas元素，並設置canvas寬高等於整個瀏覽器窗口寬高；
-
獲取瀏覽器窗口的大下(寬高)
window.innerWidth;
window.innerHeight;
-
當瀏覽器窗口寬高發生改變時，也需要重新設置canvas寬高；
window.onresize = function(){}；監聽瀏覽器窗口的變化，在瀏覽器窗口變化的時候，執行獲取瀏覽器窗口大小的方法，並給canvas進行重新賦值。
-
-
實現會動的圖形。
-
向下播放多張靜態的圖片。一秒內要大於屏幕刷新的幀數(60) 也就是每隔1/60s執行一次函數
-
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Canvas雨滴效果</title> <style> body { margin: 0; } .rain { display: block; background-color: #000; } </style> </head> <body> <canvas class="rain"></canvas> <script> // 1.獲取canvas並設置大小 var canvas = document.querySelector('.rain'); var ctxWidth, ctxHeight; // 定義畫布的寬高 ~~function setResize() { // 根據瀏覽器窗口的改變，實時改變canvas畫布的寬高，和瀏覽器保持一致 window.onresize = arguments.callee; ctxWidth = window.innerWidth; ctxHeight = window.innerHeight; canvas.width = ctxWidth; canvas.height = ctxHeight; }(); var ctx = canvas.getContext('2d'); // 2.繪制單個會動的雨滴，根據單個雨滴進行接下來的雨滴對象Rain處理 /* var y = 10; setInterval(function () { // 添加雨滴蒙版，使用透明色，使雨滴向上看起來有逐漸透明的效果 ctx.fillStyle = 'rgba(0,0,0,0.05)'; ctx.fillRect(0, 0, ctxWidth, ctxHeight); //繪制雨滴小矩形 ctx.fillStyle = 'blue'; ctx.fillRect(10, y++, 4, 10); }, 1000 / 60); */ function random(min, max) { // 生成從min到max之間的隨機數 return Math.random() * (max - min) + min; } // 3.設置雨滴對象 function Rain() { }; Rain.prototype = { init: function () { this.x = random(0, ctxWidth); this.y = 0; this.vY = random(4, 5); // 雨滴在Y軸上運動的速度 this.h = random(0.8 * ctxHeight, 0.9 * ctxHeight); // 雨滴停止的Y軸位置，整個畫布的80%-90%高度的地方 this.r = 1; // 圓形半徑 this.vR = 1; // 圓形半徑變化的速度 }, draw: function () { if (this.y <= this.h) { //繪制雨滴小矩形 ctx.beginPath(); ctx.fillStyle = '#31f7f7'; ctx.fillRect(this.x, this.y, 4, 10); } else { ctx.beginPath(); ctx.strokeStyle = '#31f7f7'; ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2); ctx.stroke(); } }, move: function () { if (this.y <= this.h) { this.y += this.vY; } else { if (this.r <= 100) { this.r += this.vR; } else { this.init(); } } this.draw(); } } // 創建多個雨滴的函數，將雨滴push進入arrRains中 var arrRains = []; function createRain(num) { // 每200ms生成一滴雨滴 for (var i = 0; i <= num; i++) { setTimeout(function () { var rain = new Rain(); rain.init(); rain.draw(); arrRains.push(rain); }, 200 * i); } } createRain(50); setInterval(function () { // 添加雨滴蒙版，使用透明色，使雨滴向上看起來有逐漸透明的效果 ctx.fillStyle = 'rgba(0,0,0,0.05)'; ctx.fillRect(0, 0, ctxWidth, ctxHeight); for (item of arrRains) { item.move(); } }, 1000 / 60); // 每1/60秒執行一次函數 </script> </body> </html>
效果圖，截了一張靜態的圖片，實際效果是動態的。
