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

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

看圖來分析下，我們需要實現哪些效果。
1、雨滴下落效果，移動鼠標控制下落方向
2、雨滴下落散成小水珠，小水珠的移動方向和鼠標移動方向相同
3、雨滴下落到鼠標坐標一定范圍內，散成小水珠，同樣的，小水珠的移動方向也和鼠標移動方向相同

好的，我們把整個效果大致拆分成三個效果，實現這三個效果，就完成了。
我們一步一步來實現。

實現整個效果的思路就是，
初始時
用一個數組保存雨滴對象。
一個雨滴對象里面有各個屬性用來表示，雨滴的x坐標，y坐標，長度，下落速度，顏色，判斷是否刪除的標志位
更新動畫時
往數組中添加一定數量的雨滴對象，然后遍歷數組，修改每個雨滴對象的x坐標和y坐標，用canvas根據雨滴對象的坐標，畫出兩個點，連起來就是一個雨滴了。

所以實現效果的重點就在坐標上
初始化一個雨滴的時候
雨滴x坐標：一個隨機數
雨滴y坐標：-100，這樣是為了讓雨滴從可視區域外進來
更新動畫時
雨滴x坐標：原x坐標的值 + speed * speedx
speed 是一個固定的值，表示雨滴下落速度，
speedx 是一個和鼠標移動方向有關系的變量，
speedx = speedx + (maxspeedx - speedx) / 50

而maxspeedx 是根據鼠標移動方向得到的一個值
maxspeedx = (e.clientX - canvasEl.clientWidth / 2) / (canvasEl.clientWidth / 2)，
e.clientX：鼠標距離可視區域左邊的值
canvasEl.clientWidth：整個可視區域的寬度
也就是說 speedx 是一個逐漸接近maxspeedx 的值
maxspeedx 的取值范圍是 -1 到 1，他的值越接近 -1，說明方向越向左，值越接近1，說明方向越向右。
為什么不直接用maxspeedx ？
這是為了讓雨滴變化方向的速度不要那么快，不要跟隨鼠標變化方向立即改變，要有點點的延遲，看上去更好些。
如果用maxspeedx ，是這樣的效果

如果用speedx ，是這樣的效果

雨滴y坐標：原y坐標的值 + speed
speed 和上面x坐標中提到的一樣，是一個固定值，表示雨滴下落速度，

好的，最后就是用canvas根據雨滴對象的坐標，畫兩個點了，然后連起來，雨滴就畫出來了
第一個點坐標比較簡單，直接獲取雨滴對象的x坐標和y坐標，就是這個點的坐標
第二個點的坐標：
x坐標 = 雨滴x坐標的值 + 雨滴長度 * speedx
y坐標 = 雨滴y坐標的值 + 雨滴長度
最后把這兩個點連起來，就有一條線了，就是一個雨滴了

當設置x坐標時，又用上了變量 speedx，這是為了讓 雨滴方向 和 雨滴下落方向相同，
當不用 speedx時，是這樣

當用上speedx時，是這樣

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

所以實現效果的重點還在坐標上
初始化一個小水珠的時候
小水珠是雨滴消失的時候出現的，所以小水珠的坐標也是根據雨滴的坐標來的，刪除一個雨滴，就出現一些小水珠，而且小水珠的移動方向也是和雨滴下落方向，鼠標移動方向一樣，所以還是會需要上面提到的變量 speedx，
小水珠x坐標： 刪除的雨滴x坐標 + 刪除的雨滴長度 * speedx
小水珠y坐標：刪除的雨滴y坐標 + 刪除的雨滴長度
更新動畫時
這里要用到小水珠對象的兩個屬性 vx（x軸的值 的變化速度） 和vy（y軸的值 的變化速度），
小水珠的x坐標
vx = vx + speedx / 2
小水珠的x坐標 =原x坐標 + vx，

speedx：上面提到的和鼠標移動方向相關的一個變量，這里的作用就是用來控制小水珠的移動方向和其他方向相同
speedx / 2，除2是為了使 讓小水珠 在x軸的移動距離短一點，看上去更真實點

小水珠的y坐標
vy = vy + gravity
小水珠的y坐標 = 原y坐標 + vy;，
vy：一個負數
gravity：重力，一個正數，完整代碼里設置的是0.5
因為 原y坐標 是一個正數，這樣小水珠y坐標的值，就會先減小后增大，這是為了實現小水珠會先上升后下降的效果，看圖

最后就是用canvas根據小水珠的坐標屬性和半徑屬性畫圓弧就可以了，弧度是隨機的

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

因為雨滴是兩個點連起來的一條線，要看雨滴是不是進入了這個范圍內， 就是看雨滴靠下邊的點的坐標，到鼠標的直線距離是多少，就是圖中AB線段的長度。

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

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

BC = 雨滴x坐標 - 鼠標x坐標
AC = 雨滴y坐標 - 鼠標y坐標
Math.sqrt()方法用來計算一個數的平方根

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

要實現這個效果，麻煩的地方在于方向，雨滴方向，雨滴下落方向，小水珠移動方向，而這些都和鼠標移動方向相關，確定各種方向后，根據距離，用canvas不斷的畫線，畫圓弧就行了。

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