html5刮奖效果,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刮奖效果,HTML5+Canvas实战之刮奖效果相关推荐

html5刮奖效果,HTML5 Canvas实战之刮奖效果
近年来由于移动设备对HTML5的较好支持,经常有活动用刮奖的效果,最近也在看H5方面的内容,就自己实现了一个,现分享出来跟大家交流. 1.效果 2.原理原理很简单,就是在刮奖区添加两个canvas, ...
html5 多啦a梦,canvas实现哆啦A梦效果
//获取页面元素 var canvas = document.getElementById('abc'); //获取渲染上下文 var con = canvas.getContext('2d'); / ...
canvas实践——绘制刮刮卡
canvas实践--绘制刮刮卡刮刮卡是一种常见的效果,如下图所示: 上述效果可以通过canvas中图像合成来实现,具体思路和代码如下: 1.利用css将刮刮卡的结果与canvas灰色涂层重叠: ht ...
HTML用画布实现刮刮卡,利用HTML5的画布Canvas实现刮刮卡效果_javascript技巧
先给大家展示效果: 你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. ...
html5粒子形成图案,html5 canvas粒子形成下雪背景的效果
本篇文章给大家带来的内容是关于html5 canvas粒子形成下雪背景的效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. canvas粒子形成下雪背景 body{ margin: ...
html5的canvas动画效果,HTML5 Canvas：制作动画特效
要在HTML5 canvas中绘制图像动画效果,你需要绘制出每一帧的图像,然后在一个极短的时间内从一帧过渡到下一帧,形成动画效果.这其实是一种视觉欺骗,原理就像播放电影一样,胶片上每一格是一帧图片,然 ...
html5 canvas 遮罩,HTML5 canvas如何实现橡皮擦擦拭效果
简要教程这是一款HTML5 canvas橡皮擦擦拭效果.该效果通过canvas来制作遮罩层和擦拭用的橡皮擦,用户可以通过移动鼠标来移除遮罩层,效果非常炫酷. 使用方法 HTML结构该HTML5 c ...
用HTML5 Canvas 做擦除及扩散效果
2013年的时候曾经使用canvas实现了一个擦除效果的需求,即模拟用户在模糊的玻璃上擦除水雾看到清晰景色的交互效果.好在2012年的时候学习HTML5的时候研究过canvas了,所以在比较短的时间内 ...
canvas 擦除动画_用HTML5 Canvas 做擦除及扩散效果
2013年的时候曾经使用canvas实现了一个擦除效果的需求,即模拟用户在模糊的玻璃上擦除水雾看到清晰景色的交互效果.好在2012年的时候学习HTML5的时候研究过canvas了,所以在比较短的时间内 ...

html5刮奖效果,HTML5+Canvas实战之刮奖效果

html5刮奖效果,HTML5+Canvas实战之刮奖效果相关推荐

最新文章

热门文章