UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

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

所属分类：其他-游戏

 26230  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() // 提供的重置方法
        }
    }
})
相关插件-游戏
查看更多

flappy Text

 奇葩版Flappy Bird
  游戏
 26041  309

jQuery扑克牌翻牌小游戏

 jQuery、css3简单实现扑克翻牌记忆小游戏
  游戏
 24423  274

HTML5 塔防游戏

 HTML5 塔防游戏
  游戏
 42950  379

js圈圈叉叉小游戏

 古老的游戏源码，小朋友们不用在纸上画了，可双人，可单机，啊哈哈
  游戏
 32622  338

讨论这个项目（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
        这个可以根据需求自行更改~
    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复