說明
這篇文章說如何用canvas畫出漂亮的下雨效果，先看看最後實現的效果吧。
效果圖解釋
看圖來分析下，我們需要實現哪些效果。
1、雨滴下落效果，移動滑鼠控制下落方向
2、雨滴下落散成小水珠，小水珠的移動方向和滑鼠移動方向相同
3、雨滴下落到滑鼠座標一定範圍內，散成小水珠，同樣的，小水珠的移動方向也和滑鼠移動方向相同
好的，我們把整個效果大致拆分成三個效果，實現這三個效果，就完成了。
我們一步一步來實現。
1、雨滴下落效果，移動滑鼠控制下落方向
實現整個效果的思路就是，
初始時用乙個陣列儲存雨滴物件。
乙個雨滴物件裡面有各個屬性用來表示，雨滴的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時，是這樣
2、雨滴下落散成小水珠，小水珠的移動方向和滑鼠移動方向相同
這裡的思路其實，和上面的效果有些相似
初始時用乙個陣列儲存小水珠物件。
乙個小水珠，其實就是畫乙個圓弧。
乙個小水珠物件裡面有各個屬性用來表示，小水珠的座標，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軸的移動距離短一點，看上去更真nrpbt實點
小水珠的y座標
vy = vy + gr**ity
小水珠的y座標 = 原y座標 + vy;，
vy：乙個負數
gr**ity：重力，乙個正數，完整**裡設定的是0.5
因為 原y座標 是乙個正數，這樣小水珠y座標的值，就會先減小後增大，這是為了實現小水珠會先上公升後下降的效果，看圖
最後就是用canvas根據小水珠的座標屬性和半徑屬性畫圓弧就可以了，弧度是隨機的
3、雨滴下落到滑鼠座標一定範圍內，散成小水珠，同樣的，小水珠的移動方向也和滑鼠移動方向相同
確定圖中圓的大小容易，假設圓的半徑是35，我們能獲取到滑鼠的座標，以滑鼠的座標為圓心，35為半徑，就確定了圓的大小。
重點在於如何判斷，雨滴是不是進入了這個範圍，這就要用勾股定理了，看圖。
因為雨滴是兩個點連起來的一條線，要看雨滴是不是進入了這個範圍內， 就是看雨滴靠下邊的點的座標，到滑鼠的直線距離是多少，就是圖中ab線段的長度。
勾股定理：直角三角形的兩條直角邊的平方和等於斜邊的平方。ab = math.sqrt(bcbc + ac ac)
bc = 雨滴x座標 - 滑鼠x座標
ac = 雨滴y座標 - 滑鼠y座標
math.sqrt()方法用來計算乙個數的平方根
我們知道雨滴到滑鼠的直線距離後，和圓的半徑比較下，大於半徑就不在範圍內，否則就是在了。
如果在範圍內，就刪除雨滴，畫一些小水珠。
總結要實現這個效果，麻煩的地方在於方向，雨滴方向，雨滴下落方向，小水珠移動方向，而這些都和滑鼠移動方向相關，確定各種方向後，根據距離，用canvas不斷的畫線，畫圓弧就行了。
完整**
本文標題: canvas實現漂亮的下雨效果的示例
本文位址:
canvas實現浮雕效果
還是這個美女,長這樣 然後進行乙個浮雕操作 一瞬間,生動活躍的人物就變成了石板雕刻,還帶上了一點質感.如何實現這種浮雕質感呢?放在畫布裡,也就是對畫素的操作,關鍵就在怎麼操作了.先這樣 把每個畫素的通道和相鄰畫素的通道值進行差值運算,再這樣 得到結果加上中性灰的值 128 然後再這樣 當前畫素把以上...
canvas 實現簽名效果
用canvas和svg都可以實現，而且跨平台能力也很好。兩者各有自己擅長的領域，基於以上，以下是用canvas實現的移動端簽字功能。從建立 設定 監聽繪製 重繪 儲存等進行處理。html結構 清除p 儲存p div css樣式 html,body canvas canvas canvas clear...
canvas實現刮刮卡效果
目前在html5和css3的熱潮下，html頁面的效果也是層出不窮，下面我們來介紹使用canvas來模仿刮獎刮開效果。原理在需要刮出的或者文字上方蓋上一層灰色或者其他背景的canvas畫布，當手指或者滑鼠點選畫布並移動時，將畫布上移動過的軌跡變成透明即可。分析demo中在class為content的...