catchRedPacket

功能描述

H5红包雨效果,用例参见 catchRedPacket.html

概述

仿淘宝、京东实现红包雨效果,基于canvas实现,使用原生js开发,实际逻辑代码200行左右。

依赖的模块

  1. ./libs/catchRedPacket.js

快速使用

代码很简单,没有过度封装,适合根据自己的业务进行二次开发。 一个canvas元素和一个倒计时元素

  1. <canvas style="background: #ffee97;" width="320" height="504" id="canvas"></canvas>
  2. <div class="tim_dsq" id="clock"></div>

然后引入模块文件

  1. <script type="application/javascript" src="./libs/catchRedPacket.js"></script>

可以自己加个开始按钮,调用以下方法,传入canvas元素就可以运行了。

  1. catchRedPacket('#canvas');