当前位置:首页 > Canvas实现刮刮卡功能,canvas刮奖,canvas抽奖

Canvas实现刮刮卡功能,canvas刮奖,canvas抽奖

发布于 2018-06-08 阅读 541 次 Canvas Javascript HTML5

预览:刮刮卡
介绍:适用于事先确定好中奖结果的,中奖结果由后台设置,此代码只是负责展示一个效果。
使用:
1.引入card.js

  1. <script src="https://www.w2le.com/demo/lib/card.js?version=1.0"></script>

2.初始化代码

  1. <!-- data-url 奖品或者未中奖图片url -->
  2. <div class="canvas J-canvas" id="card" data-url="images/quan1.png"></div>
  1. var card = new Card({
  2. id : 'card',
  3. backType : 'image',
  4. backImg: $('.J-canvas').data('url'), //奖品图
  5. maskType: 'image',
  6. maskImg: '/demo/images/guagua-cover.png', //蒙层图
  7. width: 200,
  8. height: 100,
  9. radius: h/5,
  10. callback: function(){
  11. // winningCallback();
  12. }
  13. });
  14. card.init();

如果需要显示刮开百分比调用drawPercent。
详细可以自己看代码,自认为注释很详细。