写个红包雨,纪念一下那些还能拿红包的岁月~
上个图先
游戏核心：掌握canvas的基本应用，保持动画流畅性。
业务核心问题：
1\. 生成红包：要求红包必须散落在各个位置不能重叠 ；
2\. 红包下落运动，使用定时器**setTimeout**或者动画函数**requestAnimationFrame**进行清除并重新绘制每一帧的画面；
3\. 用户点击红包，计算鼠标位置是否点中红包。
以上过程的具体实现思路可以参考这篇文章：canvas+vue实现60帧FPS的抢金币动画（类天猫红包雨）(出自掘金用户**amandakelake**)，已详细描述了实现的过程，这里不做赘述。
在这个基础上实现另外的两个动画：摇摆和点击缩放。
需要了解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吧
