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

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

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

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

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

2.初始化代码

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

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