投稿 搜索

热搜词

热门文章

当前位置: 站长天下 / 图片相册背景 / jQuery实现刮奖插件ScratchMod特效
jQuery实现刮奖插件ScratchMod特效
标签:

插件介绍

    刮奖用组件,使用了html5的画布(canvas) 在不支持画布的浏览器中自动使用div的形式。

    浏览器兼容性

    浏览器兼容性
    时间:2018-07-19
    阅读:

jQuery实现刮奖插件ScratchMod特效

简要教程

刮奖用组件,使用了html5的画布(canvas) 在不支持画布的浏览器中自动使用div的形式。

使用方法

依赖jquery

组件需要一个容器元素,组件将在容器中生成刮奖元素,自动兼容不支持画布的浏览器,调用时返刮奖元素

<div id="scratch_mod_container" ></div>
var canvas = ScratchMod({
    'container': , //目标容器
    'bgImgSrc': , //背景图
    'imgSrc': , //蒙版图
    'penImgSrc': , //擦笔图
    'color': , //蒙版颜色(有imgSrc的情况下该属性无效)
    'width': , //宽度
    'height': , //高度
    'eraseRadius': , //擦除笔的半径(有penImgSrc的情况下无效)
    'sampleStep': , //获取擦除百分百时的精度(数字越大精度越小)
    'sampleCD': , //获取擦除百分百的时间间隔
    'sampleCallback': , //获取擦除百分百的回调函数(返回true后不再回调),回调的第一个入参为擦除百分百
    'startCallback': //开始刮的回调(只回调一次,回调的第一个入参为生成的元素类型 canvas或div)
})