長大了再也沒有人給我發紅包了,那就本身發!下紅包雨啦

寫個紅包雨,記念一下那些還能拿紅包的歲月~

上個圖先

遊戲核心：掌握canvas的基本應用，保持動畫流暢性。

業務核心問題：

1. 生成紅包：要求紅包必須散落在各個位置不能重疊 ；

2. 紅包下落運動，使用定時器 setTimeout或者動畫函數 requestAnimationFrame進行清除並從新繪製每一幀的畫面；

3. 用戶點擊紅包，計算鼠標位置是否點中紅包。

以上過程的具體實現思路能夠參考這篇文章：canvas+vue實現60幀FPS的搶金幣動畫（類天貓紅包雨）(出自掘金用戶 amandakelake)，已詳細描述了實現的過程，這裏不作贅述。

juejin.im/post/5c874d…

在這個基礎上實現另外的兩個動畫：搖擺和點擊縮放。

須要瞭解canvas的旋轉API是以左上方（0，0）爲中心點進行旋轉，像這樣：

所以咱們要進行以紅包中心點爲準進行旋轉，須要使用另外一個API：translate()來變換畫布的座標。

注意：rotate完後要再從新translate回到座標點(0,0)，否則畫出來的紅包就有可能出界了！

ctx.translate(紅包左上方的x座標 + 紅包的寬度/2, 紅包左上方的y座標 + 紅包的高度/2);
ctx.rotate(rotate);   // 要旋轉的角度
ctx.translate(-紅包左上方的x座標 - 紅包的寬度/2, -紅包左上方的y座標 - 紅包的高度/2);複製代碼

同理可得紅包的縮放效果。

最後，點擊紅包事件監聽綁定在canvas上，當點擊canvas時獲取鼠標的座標，而後跟當前紅包的座標進行比對便可。

if(Math.abs(紅包左上角x座標- 鼠標x座標) < 紅包寬度 && Math.abs(紅包左上角y座標 - 鼠標y座標) < 紅包高度){ 
 // 可作計分等功能
}複製代碼

這裏要注意，由於動畫很快，有的時候點擊紅包沒有反應，能夠對點擊的面積適當的加大一點。

貼個github ,有須要的自取，若是以爲還ok的話，點個star吧

github.com/PeggyWeb/ga…