js刮奖(已封装,引入即用)

所属分类:其他-游戏

 25557  313  查看评论 (9)
分享到微信朋友圈
X
js刮奖(已封装,引入即用) ie兼容12

使用方法

只需引入canvas.js

<script src="./js/canvas.js"></script>

html

<canvas id="canvas"></canvas>
重置按钮,固定ID
<div id="freshBtn">重置</div>
样式可自行设计

js

//创建实例
var canvas = new canvasInit({
    id: canvas标签的ID,
    cover: 覆盖层( 可填颜色 / 图片路径),
    coverType: 依赖上一选项(可填 'color' / 'image'),
    width: canvas宽度(默认单位px),
    height: canvas高度(默认单位px),
    drawPercentCallback: function(num) {
        回调函数, 可为空
        返回已抹去元素的百分比
        例如:
        if (num > 30) {
            alert('获得一等奖')
            canvas.fresh() // 提供的重置方法
        }
    }
})
相关插件-游戏

jquery+css3模仿win7自带蜘蛛纸牌(原创)

渣渣码手无聊写的,仅供娱乐学习,代码思路全是自己想的,绝无抄袭
  游戏
 27060  302

jQuery移动端扭蛋抽奖

基于jQuery的移动端双色球抽奖效果
  游戏
 29693  357

h5贪吃蛇动画

h5画布,贪吃蛇简单动画
  游戏
 33351  322

jQuery图片抽奖插件lottery.js

jQuery图片滚动抽奖代码,无需安装,适合年会使用
  游戏
 35745  315

讨论这个项目(9)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    '彻底,忘? 0
    2019/12/3 17:35:38
    移动端报错 不能刮 百分比计算一直返回0 你的getTransparentPercent函数为啥判断a<128 ? 回复
    不忘初心@love 0
    2019/8/9 20:40:20
    为什么移动端不能用呢?怎么解决呀? 回复
    object.dispose() 0
    2019/8/9 15:07:06
    WckY 0
    2019/7/2 10:07:27
    作者挺厉害的 为大家提供了一个思路 我看看能不能改成自动涂抹 回复
    张先 0
    2019/3/8 17:06:31
    我一直刮旁边,没出现中间的一等奖,也弹出中奖了,这个判断刮开面积出结果 感觉不合理 回复
    hcf624804 0
    2018/11/7 13:30:40
    修改覆盖层为图片之后,刮开的显示错乱,百分比计算也不正确 回复
    征集Q名... 0
    2018/9/17 11:55:17

    在移动端报错了:

    [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See <URL>
    回复
    二十三岁 0
    2018/7/30 9:16:39
    提一点点小建议,页面的百分之30是不够的,比如我就涂开边边的位置(比较极端,但是也是一种可能)。我觉得最好是num的值在65-70之间。
        宇咩_0
        2018/8/1 16:40:11
        这个可以根据需求自行更改~
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复