长大了再也没有人给我发红包了,那就本身发!下红包雨啦

写个红包雨,记念一下那些还能拿红包的岁月~

上个图先

游戏核心：掌握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…