說(shuō)明
這篇文章說(shuō)如何用canvas畫(huà)出漂亮的下雨效果，先看看最后實(shí)現(xiàn)的效果吧。
效果圖
解釋
看圖來(lái)分析下，我們需要實(shí)現(xiàn)哪些效果。
1、雨滴下落效果，移動(dòng)鼠標(biāo)控制下落方向
2、雨滴下落散成小水珠，小水珠的移動(dòng)方向和鼠標(biāo)移動(dòng)方向相同
3、雨滴下落到鼠標(biāo)坐標(biāo)一定范圍內(nèi)，散成小水珠，同樣的，小水珠的移動(dòng)方向也和鼠標(biāo)移動(dòng)方向相同
好的，我們把整個(gè)效果大致拆分成三個(gè)效果，實(shí)現(xiàn)這三個(gè)效果，就完成了。
我們一步一步來(lái)實(shí)現(xiàn)。
1、雨滴下落效果，移動(dòng)鼠標(biāo)控制下落方向
實(shí)現(xiàn)整個(gè)效果的思路就是，
初始時(shí)
用一個(gè)數(shù)組保存雨滴對(duì)象。
一個(gè)雨滴對(duì)象里面有各個(gè)屬性用來(lái)表示，雨滴的x坐標(biāo)，y坐標(biāo)，長(zhǎng)度，下落速度，顏色，判斷是否刪除的標(biāo)志位
更新動(dòng)畫(huà)時(shí)
往數(shù)組中添加一定數(shù)量的雨滴對(duì)象，然后遍歷數(shù)組，修改每個(gè)雨滴對(duì)象的x坐標(biāo)和y坐標(biāo)，用canvas根據(jù)雨滴對(duì)象的坐標(biāo)，畫(huà)出兩個(gè)點(diǎn)，連起來(lái)就是一個(gè)雨滴了。
所以實(shí)現(xiàn)效果的重點(diǎn)就在坐標(biāo)上
初始化一個(gè)雨滴的時(shí)候
雨滴x坐標(biāo)：一個(gè)隨機(jī)數(shù)
雨滴y坐標(biāo)：-100，這樣是為了讓雨滴從可視區(qū)域外進(jìn)來(lái)
更新動(dòng)畫(huà)時(shí)
雨滴x坐標(biāo)：原x坐標(biāo)的值 + speed * speedx
speed 是一個(gè)固定的值，表示雨滴下落速度，
speedx 是一個(gè)和鼠標(biāo)移動(dòng)方向有關(guān)系的變量，speedx = speedx + (maxspeedx - speedx) / 50
而maxspeedx 是根據(jù)鼠標(biāo)移動(dòng)方向得到的一個(gè)值
maxspeedx = (e.clientX - canvasEl.clientWidth / 2) / (canvasEl.clientWidth / 2)，
e.clientX：鼠標(biāo)距離可視區(qū)域左邊的值
canvasEl.clientWidth：整個(gè)可視區(qū)域的寬度
也就是說(shuō) speedx 是一個(gè)逐漸接近maxspeedx 的值
maxspeedx 的取值范圍是 -1 到 1，他的值越接近 -1，說(shuō)明方向越向左，值越接近1，說(shuō)明方向越向右。
為什么不直接用maxspeedx ？
這是為了讓雨滴變化方向的速度不要那么快，不要跟隨鼠標(biāo)變化方向立即改變，要有點(diǎn)點(diǎn)的延遲，看上去更好些。
如果用maxspeedx ，是這樣的效果
如果用speedx ，是這樣的效果
雨滴y坐標(biāo)：原y坐標(biāo)的值 + speed
speed 和上面x坐標(biāo)中提到的一樣，是一個(gè)固定值，表示雨滴下落速度，
好的，最后就是用canvas根據(jù)雨滴對(duì)象的坐標(biāo)，畫(huà)兩個(gè)點(diǎn)了，然后連起來(lái)，雨滴就畫(huà)出來(lái)了
第一個(gè)點(diǎn)坐標(biāo)比較簡(jiǎn)單，直接獲取雨滴對(duì)象的x坐標(biāo)和y坐標(biāo)，就是這個(gè)點(diǎn)的坐標(biāo)
第二個(gè)點(diǎn)的坐標(biāo)：
x坐標(biāo) = 雨滴x坐標(biāo)的值 + 雨滴長(zhǎng)度 * speedx
y坐標(biāo) = 雨滴y坐標(biāo)的值 + 雨滴長(zhǎng)度
最后把這兩個(gè)點(diǎn)連起來(lái)，就有一條線了，就是一個(gè)雨滴了
當(dāng)設(shè)置x坐標(biāo)時(shí)，又用上了變量 speedx，這是為了讓 雨滴方向 和 雨滴下落方向相同，
當(dāng)不用 speedx時(shí)，是這樣
當(dāng)用上speedx時(shí)，是這樣
2、雨滴下落散成小水珠，小水珠的移動(dòng)方向和鼠標(biāo)移動(dòng)方向相同
這里的思路其實(shí)，和上面的效果有些相似
初始時(shí)
用一個(gè)數(shù)組保存小水珠對(duì)象。
一個(gè)小水珠，其實(shí)就是畫(huà)一個(gè)圓弧。
一個(gè)小水珠對(duì)象里面有各個(gè)屬性用來(lái)表示，小水珠的坐標(biāo)，x軸移動(dòng)速度，y軸移動(dòng)速度，圓的半徑，判斷是否刪除的標(biāo)志位。
更新動(dòng)畫(huà)時(shí)
往數(shù)組中添加一定數(shù)量的小水珠對(duì)象，然后遍歷數(shù)組，修改每個(gè)小水珠對(duì)象的x坐標(biāo)和y坐標(biāo)，用canvas根據(jù)小水珠對(duì)象的坐標(biāo)屬性 和 半徑屬性，畫(huà)一個(gè)圓弧。
所以實(shí)現(xiàn)效果的重點(diǎn)還在坐標(biāo)上
初始化一個(gè)小水珠的時(shí)候
小水珠是雨滴消失的時(shí)候出現(xiàn)的，所以小水珠的坐標(biāo)也是根據(jù)雨滴的坐標(biāo)來(lái)的，刪除一個(gè)雨滴，就出現(xiàn)一些小水珠，而且小水珠的移動(dòng)方向也是和雨滴下落方向，鼠標(biāo)移動(dòng)方向一樣，所以還是會(huì)需要上面提到的變量 speedx，
小水珠x坐標(biāo)： 刪除的雨滴x坐標(biāo) + 刪除的雨滴長(zhǎng)度 * speedx
小水珠y坐標(biāo)：刪除的雨滴y坐標(biāo) + 刪除的雨滴長(zhǎng)度
更新動(dòng)畫(huà)時(shí)
這里要用到小水珠對(duì)象的兩個(gè)屬性 vx（x軸的值 的變化速度） 和vy（y軸的值 的變化速度），
小水珠的x坐標(biāo)
vx = vx + speedx / 2
小水珠的x坐標(biāo) =原x坐標(biāo) + vx，
speedx：上面提到的和鼠標(biāo)移動(dòng)方向相關(guān)的一個(gè)變量，這里的作用就是用來(lái)控制小水珠的移動(dòng)方向和其他方向相同
speedx / 2，除2是為了使 讓小水珠 在x軸的移動(dòng)距離短一點(diǎn)，看上去更真實(shí)點(diǎn)
小水珠的y坐標(biāo)
vy = vy + gravity
小水珠的y坐標(biāo) = 原y坐標(biāo) + vy;，
vy：一個(gè)負(fù)數(shù)
gravity：重力，一個(gè)正數(shù)，完整代碼里設(shè)置的是0.5
因?yàn)?原y坐標(biāo) 是一個(gè)正數(shù)，這樣小水珠y坐標(biāo)的值，就會(huì)先減小后增大，這是為了實(shí)現(xiàn)小水珠會(huì)先上升后下降的效果，看圖
最后就是用canvas根據(jù)小水珠的坐標(biāo)屬性和半徑屬性畫(huà)圓弧就可以了，弧度是隨機(jī)的
3、雨滴下落到鼠標(biāo)坐標(biāo)一定范圍內(nèi)，散成小水珠，同樣的，小水珠的移動(dòng)方向也和鼠標(biāo)移動(dòng)方向相同
確定圖中圓的大小容易，假設(shè)圓的半徑是35，我們能獲取到鼠標(biāo)的坐標(biāo)，以鼠標(biāo)的坐標(biāo)為圓心，35為半徑，就確定了圓的大小。
重點(diǎn)在于如何判斷，雨滴是不是進(jìn)入了這個(gè)范圍，這就要用勾股定理了，看圖。
因?yàn)橛甑问莾蓚€(gè)點(diǎn)連起來(lái)的一條線，要看雨滴是不是進(jìn)入了這個(gè)范圍內(nèi)， 就是看雨滴靠下邊的點(diǎn)的坐標(biāo)，到鼠標(biāo)的直線距離是多少，就是圖中AB線段的長(zhǎng)度。
勾股定理：直角三角形的兩條直角邊的平方和等于斜邊的平方。
AB = Math.sqrt(BCBC + AC AC)
BC = 雨滴x坐標(biāo) - 鼠標(biāo)x坐標(biāo)
AC = 雨滴y坐標(biāo) - 鼠標(biāo)y坐標(biāo)
Math.sqrt()方法用來(lái)計(jì)算一個(gè)數(shù)的平方根
我們知道雨滴到鼠標(biāo)的直線距離后，和圓的半徑比較下，大于半徑就不在范圍內(nèi)，否則就是在了。
如果在范圍內(nèi)，就刪除雨滴，畫(huà)一些小水珠。
總結(jié)
要實(shí)現(xiàn)這個(gè)效果，麻煩的地方在于方向，雨滴方向，雨滴下落方向，小水珠移動(dòng)方向，而這些都和鼠標(biāo)移動(dòng)方向相關(guān)，確定各種方向后，根據(jù)距離，用canvas不斷的畫(huà)線，畫(huà)圓弧就行了。
完整代碼
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; } </style></head><body> <canvas id="canvas" style="position: absolute; height: 100%; width:100%;"></canvas> <script> window.onload = main; function main() { // 獲取canvas元素 var canvasEl = document.getElementById('canvas'); var ctx = canvasEl.getContext('2d'); // canvas畫(huà)布的 背景顏色 var backgroundColor = '#000'; // canvas畫(huà)布的寬 等于 可視區(qū)域的寬 canvasEl.width = canvasEl.clientWidth; // canvas畫(huà)布的高 等于 可視區(qū)域的高 canvasEl.height = canvasEl.clientHeight; // 保存小水珠的數(shù)組 // 雨滴下落后散成小水珠，小水珠就是一些圓弧 var dropList = []; // 重力 // 雨滴下落后散成小水珠，小水珠會(huì)先上升后下降，主要是因?yàn)?gravity 這個(gè)變量的緣故 var gravity = 0.5; // 保存雨滴的數(shù)組 // 每個(gè)雨滴 都是 畫(huà)的一條線 var linelist = []; // 保存鼠標(biāo)的坐標(biāo) // mousePos[0] 代表x軸的值，mousePos[1] 代表y軸的值 var mousePos = [0, 0]; // 跟隨鼠標(biāo)， mouseDis 大小區(qū)域內(nèi)的雨滴會(huì)消失，形成散落效果 // 以mousePos為圓心，mouseDis為半徑，這個(gè)范圍內(nèi)的雨滴 都會(huì)散開(kāi)，形成許多小水珠 var mouseDis = 35; // 更新一次動(dòng)畫(huà)，畫(huà)lineNum 條雨滴，lineNum 值越大，下雨就越密集 var lineNum = 3; // 跟隨鼠標(biāo)方向 變化下雨方向的 速度 // 鼠標(biāo)移動(dòng)后，下雨的方向 會(huì)慢慢改變，主要靠speedx 這個(gè)變量 var speedx = 0; // maxspeedx 為 speedx 可以取的最大值 // 當(dāng) speedx = maxspeedx時(shí)，下雨方向 會(huì) 隨鼠標(biāo)移動(dòng)方向立即改變 var maxspeedx = 0; // 頁(yè)面大小發(fā)生變化時(shí)，重置canvas畫(huà)布大小 window.onresize = function () { canvasEl.width = canvasEl.clientWidth; canvasEl.height = canvasEl.clientHeight; } //移動(dòng)鼠標(biāo)觸發(fā)事件 window.onmousemove = function (e) { // 設(shè)置mousePos 等于 鼠標(biāo)坐標(biāo) // e.clientX 為距離 瀏覽器窗口可視區(qū)域 左邊的距離 // e.clientY 為距離 瀏覽器窗口可視區(qū)域 上邊的距離 mousePos[0] = e.clientX; mousePos[1] = e.clientY; // 通過(guò)鼠標(biāo)位置，設(shè)置 maxspeedx的值，取值范圍是 -1 到 1 // maxspeedx的值，關(guān)系到 // 1、雨滴的方向 // 2、雨滴下落的方向 // 3、雨滴下落方向 跟隨 鼠標(biāo)移動(dòng)方向變化的速度 // 4、小水珠的移動(dòng)方向 // 值越接近1，表示方向越向右 // 值越接近-1，表示方向越向左 maxspeedx = (e.clientX - canvasEl.clientWidth / 2) / (canvasEl.clientWidth / 2); } // 根據(jù)參數(shù)，返回一個(gè)rgb顏色，用于給雨滴設(shè)置顏色 function getRgb(r, g, b) { return "rgb(" + r + "," + g + "," + b + ")"; } // 畫(huà) 一滴雨（一條線） function createLine(e) { // 隨機(jī)生成 雨滴的長(zhǎng)度 var temp = 0.25 * (50 + Math.random() * 100); // 一個(gè) line 對(duì)象，代表一個(gè)雨滴 var line = { // 雨滴下落速度 speed: 5.5 * (Math.random() * 6 + 3), // 判斷是否刪除，值為true就刪除 die: false, // 雨滴x坐標(biāo) posx: e, // 雨滴y坐標(biāo) posy: -50, // 雨滴的長(zhǎng)度 h: temp, // 雨滴的顏色 color: getRgb(Math.floor(temp * 255 / 75), Math.floor(temp * 255 / 75), Math.floor(temp * 255 / 75)) }; // 把創(chuàng)建好的line（雨滴）對(duì)象，添加到保存雨滴的數(shù)組 linelist.push(line); } // 畫(huà)一個(gè)小水珠（雨滴散開(kāi)后的小水珠就是一個(gè)個(gè)的圓弧） function createDrop(x, y) { // 一個(gè) drop 對(duì)象，代表一個(gè)圓弧 var drop = { // 判斷是否刪除，值為true就刪除 die: false, // 圓弧圓心的x坐標(biāo) posx: x, // 圓弧圓心的y坐標(biāo) posy: y, // vx 表示 x軸的值 變化的速度 vx: (Math.random() - 0.5) * 8, // vy 表示 y軸的值 變化的速度 取值范圍：-3 到 -9 vy: Math.random() * (-6) - 3, // 圓弧的半徑 radius: Math.random() * 1.5 + 1 }; return drop; } // 畫(huà)一定數(shù)量的小水珠 function madedrops(x, y) { // 隨機(jī)生成一個(gè)數(shù) maxi // maxi 代表要畫(huà)小水珠的數(shù)量 var maxi = Math.floor(Math.random() * 5 + 5); for (var i = 0; i < maxi; i++) { dropList.push(createDrop(x, y)); } } // 開(kāi)始調(diào)用update函數(shù)，更新動(dòng)畫(huà) window.requestAnimationFrame(update); // 更新動(dòng)畫(huà) function update() { // 如果保存小水珠的數(shù)組有內(nèi)容 if (dropList.length > 0) { // 遍歷保存小水珠的數(shù)組 dropList.forEach(function (e) { //設(shè)置e.vx，vx表示x坐標(biāo)變化的速度 // (speedx)/2 是為了，讓小水珠 在x軸的移動(dòng)距離短一點(diǎn)，看上去更真實(shí)點(diǎn) // 也使 小水珠的移動(dòng)方向 和 雨滴方向，雨滴下落方向，鼠標(biāo)移動(dòng)方向相同 e.vx = e.vx + (speedx / 2); e.posx = e.posx + e.vx; //設(shè)置e.vy，vy表示y坐標(biāo)變化的速度 // e.vy的范圍是-3 到 -9，而這時(shí)e.posy（y坐標(biāo)）一定是正值，所以 e.posy的值會(huì)先減小后增大 // 也就是實(shí)現(xiàn) 雨滴散成小水珠，小水珠會(huì)先上升后下降的效果 e.vy = e.vy + gravity; e.posy = e.posy + e.vy; // 如果 小水珠y坐標(biāo) 大于 可視區(qū)域的高度，設(shè)置die屬性為true // 小水珠如果超出可視區(qū)域就刪除掉 if (e.posy > canvasEl.clientHeight) { e.die = true; } }); } // 刪除 die屬性為ture 的數(shù)組成員 // 可視區(qū)域外的小水珠刪除掉 for (var i = dropList.length - 1; i >= 0; i--) { if (dropList[i].die) { dropList.splice(i, 1); } } // 設(shè)置下雨方向變換的速度，取值范圍： -1 到 1 // 當(dāng) speedx = maxspeedx時(shí)，下雨方向 會(huì) 隨鼠標(biāo)移動(dòng)方向立即改變 speedx = speedx + (maxspeedx - speedx) / 50; // 根據(jù)lineNum的值，畫(huà)一定數(shù)量雨滴 for (var i = 0; i < lineNum; i++) { // 調(diào)用createLine 函數(shù)，參數(shù)是雨滴x坐標(biāo) createLine(Math.random() * 2 * canvasEl.width - (0.5 * canvasEl.width)); } // 設(shè)置結(jié)束線，也就是雨滴散開(kāi) 形成許多小水珠的位置 var endLine = canvasEl.clientHeight - Math.random() * canvasEl.clientHeight / 5; // 遍歷保存雨滴的數(shù)組 linelist.forEach(function (e) { // 利用勾股定理 確定一個(gè)范圍，在這個(gè)范圍內(nèi)雨滴會(huì)散開(kāi)形成小水珠 // e.posx + speedx * e.h 是雨滴x坐標(biāo) // e.posy + e.h 是雨滴y坐標(biāo) var dis = Math.sqrt(((e.posx + speedx * e.h) - mousePos[0]) * ((e.posx + speedx * e.h) - mousePos[0]) + (e.posy + e.h - mousePos[1]) * (e.posy + e.h - mousePos[1])); // 如果在mouseDis區(qū)域內(nèi)，就刪除雨滴，畫(huà)一些小水珠（圓弧） // 實(shí)現(xiàn)鼠標(biāo)碰到雨滴，雨滴散成小水珠的效果 if (dis < mouseDis) { // 刪除 雨滴 e.die = true; // 畫(huà)一些小水珠（圓弧） madedrops(e.posx + speedx * e.h, e.posy + e.h); } // 如果雨滴超過(guò) 結(jié)束線，刪除雨滴，畫(huà)一些小水珠（圓弧） if ((e.posy + e.h) > endLine) { e.die = true; madedrops(e.posx + speedx * e.h, e.posy + e.h); } // 如果 雨滴 y坐標(biāo) 大于 可視區(qū)域的高度，設(shè)置die屬性為true // 如果 雨滴 超出可視區(qū)域就刪除掉 if (e.posy >= canvasEl.clientHeight) { e.die = true; } else { // 逐漸增加 雨滴 y坐標(biāo)的值 e.posy = e.posy + e.speed; // 變化雨滴 x坐標(biāo) // * speedx 用來(lái)控制雨滴 下落 方向 // 使 雨滴下落方向 和 鼠標(biāo)移動(dòng)方向相同 e.posx = e.posx + e.speed * speedx; } }); // 刪除 die屬性為ture 的數(shù)組成員 // 鼠標(biāo)區(qū)域內(nèi)的，超過(guò)結(jié)束線的，可視區(qū)域外的雨滴刪除掉 for (var i = linelist.length - 1; i >= 0; i--) { if (linelist[i].die) { linelist.splice(i, 1); } } // 渲染 render(); // 遞歸調(diào)用 update，實(shí)現(xiàn)動(dòng)畫(huà)效果 window.requestAnimationFrame(update); } // 渲染 function render() { // 畫(huà)一個(gè)和可視區(qū)域一樣大的矩形 ctx.fillStyle = backgroundColor; ctx.fillRect(0, 0, canvasEl.width, canvasEl.height); // 畫(huà)雨滴效果 ctx.lineWidth = 5; linelist.forEach(function (line) { ctx.strokeStyle = line.color; ctx.beginPath(); ctx.moveTo(line.posx, line.posy); // * speedx 用來(lái)控制雨滴方向 // 使 雨滴方向 和 鼠標(biāo)移動(dòng)方向相同 ctx.lineTo(line.posx + line.h * speedx, line.posy + line.h); ctx.stroke(); }); // 畫(huà)雨滴散開(kāi)形成小水珠效果 ctx.lineWidth = 1; ctx.strokeStyle = "#fff"; dropList.forEach(function (e) { ctx.beginPath(); ctx.arc(e.posx, e.posy, e.radius, Math.random() * Math.PI * 2, 1 * Math.PI); ctx.stroke(); }); // 解開(kāi)注釋，可看見(jiàn)鼠標(biāo)范圍 /* ctx.beginPath(); ctx.arc(mousePos[0], mousePos[1], mouseDis, 0, 2 * Math.PI); ctx.stroke(); */ } } </script></body></html>以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
