摘要：說明這篇文章說如何用畫出漂亮的下雨效果，先看看最后實(shí)現(xiàn)的效果吧。

這篇文章說如何用canvas畫出漂亮的下雨效果，先看看最后實(shí)現(xiàn)的效果吧。
效果圖

看圖來分析下，我們需要實(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è)效果，就完成了。
我們一步一步來實(shí)現(xiàn)。

實(shí)現(xiàn)整個(gè)效果的思路就是，
初始時(shí)
用一個(gè)數(shù)組保存雨滴對(duì)象。
一個(gè)雨滴對(duì)象里面有各個(gè)屬性用來表示，雨滴的x坐標(biāo)，y坐標(biāo)，長度，下落速度，顏色，判斷是否刪除的標(biāo)志位
更新動(dòng)畫時(shí)
往數(shù)組中添加一定數(shù)量的雨滴對(duì)象，然后遍歷數(shù)組，修改每個(gè)雨滴對(duì)象的x坐標(biāo)和y坐標(biāo)，用canvas根據(jù)雨滴對(duì)象的坐標(biāo)，畫出兩個(gè)點(diǎn)，連起來就是一個(gè)雨滴了。

所以實(shí)現(xiàn)效果的重點(diǎn)就在坐標(biāo)上
初始化一個(gè)雨滴的時(shí)候
雨滴x坐標(biāo)：一個(gè)隨機(jī)數(shù)
雨滴y坐標(biāo)：-100，這樣是為了讓雨滴從可視區(qū)域外進(jìn)來
更新動(dòng)畫時(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ū)域的寬度
也就是說 speedx 是一個(gè)逐漸接近maxspeedx 的值
maxspeedx 的取值范圍是 -1 到 1，他的值越接近 -1，說明方向越向左，值越接近1，說明方向越向右。
為什么不直接用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)，畫兩個(gè)點(diǎn)了，然后連起來，雨滴就畫出來了
第一個(gè)點(diǎn)坐標(biāo)比較簡單，直接獲取雨滴對(duì)象的x坐標(biāo)和y坐標(biāo)，就是這個(gè)點(diǎn)的坐標(biāo)
第二個(gè)點(diǎn)的坐標(biāo)：
x坐標(biāo) = 雨滴x坐標(biāo)的值 + 雨滴長度 * speedx
y坐標(biāo) = 雨滴y坐標(biāo)的值 + 雨滴長度
最后把這兩個(gè)點(diǎn)連起來，就有一條線了，就是一個(gè)雨滴了

當(dāng)設(shè)置x坐標(biāo)時(shí)，又用上了變量 speedx，這是為了讓 雨滴方向 和 雨滴下落方向相同，
當(dāng)不用 speedx時(shí)，是這樣

當(dāng)用上speedx時(shí)，是這樣

這里的思路其實(shí)，和上面的效果有些相似
初始時(shí)
用一個(gè)數(shù)組保存小水珠對(duì)象。
一個(gè)小水珠，其實(shí)就是畫一個(gè)圓弧。
一個(gè)小水珠對(duì)象里面有各個(gè)屬性用來表示，小水珠的坐標(biāo)，x軸移動(dòng)速度，y軸移動(dòng)速度，圓的半徑，判斷是否刪除的標(biāo)志位。
更新動(dòng)畫時(shí)
往數(shù)組中添加一定數(shù)量的小水珠對(duì)象，然后遍歷數(shù)組，修改每個(gè)小水珠對(duì)象的x坐標(biāo)和y坐標(biāo)，用canvas根據(jù)小水珠對(duì)象的坐標(biāo)屬性 和 半徑屬性，畫一個(gè)圓弧。

所以實(shí)現(xiàn)效果的重點(diǎn)還在坐標(biāo)上
初始化一個(gè)小水珠的時(shí)候
小水珠是雨滴消失的時(shí)候出現(xiàn)的，所以小水珠的坐標(biāo)也是根據(jù)雨滴的坐標(biāo)來的，刪除一個(gè)雨滴，就出現(xiàn)一些小水珠，而且小水珠的移動(dòng)方向也是和雨滴下落方向，鼠標(biāo)移動(dòng)方向一樣，所以還是會(huì)需要上面提到的變量 speedx，
小水珠x坐標(biāo)： 刪除的雨滴x坐標(biāo) + 刪除的雨滴長度 * speedx
小水珠y坐標(biāo)：刪除的雨滴y坐標(biāo) + 刪除的雨滴長度
更新動(dòng)畫時(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è)變量，這里的作用就是用來控制小水珠的移動(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)屬性和半徑屬性畫圓弧就可以了，弧度是隨機(jī)的

確定圖中圓的大小容易，假設(shè)圓的半徑是35，我們能獲取到鼠標(biāo)的坐標(biāo)，以鼠標(biāo)的坐標(biāo)為圓心，35為半徑，就確定了圓的大小。
重點(diǎn)在于如何判斷，雨滴是不是進(jìn)入了這個(gè)范圍，這就要用勾股定理了，看圖。

因?yàn)橛甑问莾蓚€(gè)點(diǎn)連起來的一條線，要看雨滴是不是進(jìn)入了這個(gè)范圍內(nèi)， 就是看雨滴靠下邊的點(diǎn)的坐標(biāo)，到鼠標(biāo)的直線距離是多少，就是圖中AB線段的長度。

勾股定理：直角三角形的兩條直角邊的平方和等于斜邊的平方。

AB = Math.sqrt(BC*BC + AC * AC)

BC = 雨滴x坐標(biāo) - 鼠標(biāo)x坐標(biāo)
AC = 雨滴y坐標(biāo) - 鼠標(biāo)y坐標(biāo)
Math.sqrt()方法用來計(jì)算一個(gè)數(shù)的平方根

我們知道雨滴到鼠標(biāo)的直線距離后，和圓的半徑比較下，大于半徑就不在范圍內(nèi)，否則就是在了。
如果在范圍內(nèi)，就刪除雨滴，畫一些小水珠。

要實(shí)現(xiàn)這個(gè)效果，麻煩的地方在于方向，雨滴方向，雨滴下落方向，小水珠移動(dòng)方向，而這些都和鼠標(biāo)移動(dòng)方向相關(guān)，確定各種方向后，根據(jù)距離，用canvas不斷的畫線，畫圓弧就行了。

最后說一句
這個(gè)特效的作者是 sxq111本尊 大神，我只是站在巨人的肩膀上，喜歡的小伙伴們可以去github上給個(gè)小star哦。