mjzxcyypp的gravatar头像
mjzxcyypp2018-04-04 09:12:20

HTML5+Canvas实战之刮奖效果

项目描述

HTML5+Canvas实战之刮奖效果,实现网页上刮奖,可以用作验证码;

可以在移动设备上和PC端网页(浏览器要支持canvas)上运行

##使用说明


    var lottery = new Lottery(id, cover, coverType, width, height, drawPercentCallback);
    
    lottery.init(lottery,lotteryType);
    
    function drawPercentCallback(percent) {
        //some code here
    }

##构造方法参数解释

`id`:刮奖容器,必须

`cover`:涂层内容,可以为图片地址或颜色值,可空,默认为 #ccc

`coverType`:涂层类型,值为 image 或 color,可空,默认为 color

`width`:刮奖区域宽度,默认为300px,可空

`height`:刮奖区域高度,默认为100px,可空

`drawPercentCallback`:刮开的区域百分比,可空

##init方法解释

`lottery`:刮开后显示的内容,可以为图片地址或字符串,必须

`lotteryType`:刮开后显示的内容类型,值为 image 或 text,要跟`lottery`匹配,默认为 image

运行环境

html

项目技术(必填)

HTML5+Canvas+CSS

数据库文件

jar包文件

是否原创(转载必填原文地址)

原创

项目截图(必填)

HTML5+Canvas实战之刮奖效果

运行截图(必填)

HTML5+Canvas实战之刮奖效果


打赏

文件名:Lottery-master.zip,文件大小:3.829K下载
  • /
      • /Lottery-master
        • /Lottery-master/Lottery.js
        • /Lottery-master/index.html
        • /Lottery-master/index.html.bak
顶部客服微信二维码底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友