Itclubs.cn
javascript+canvas实现刮奖

插件描述:js活动刮奖插件,ES6编写,已封装

  1. 只需引入canvas.js
<script src="./js/canvas.js"></script>
  1. html
<canvas id="canvas"></canvas>
重置按钮,固定ID
<div id="freshBtn">重置</div>
样式可自行设计
  1. 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() // 提供的重置方法
        }
    }
})

捐赠站长

微信pay
支付宝

评论区

javascript+canvas实现刮奖
您当前还未登陆,下载此资源必须先 登陆