Atitit .html5刮刮卡的gui实现总结
来源:互联网 发布:山西省快乐十分软件 编辑:程序博客网 时间:2024/05/19 13:58
Atitit .html5刮刮卡的gui实现总结
#----两个案例canvas或者wScratchPad-1.4.4 1
#----1.添加panel ,这个十mask div.....postion:absoluti..高度宽度都是100% 1
#---2.初始化wScratchPad 1
#-----判断抽奖机会已经用完and 遮罩挠完33%走自动清空mask.. 2
#-----设置mask图片加载后的事件(初始化悬浮图片top位置>>ajax开始>>加载bingo/nobigon的div) 3
#---wScratchPad.js的几个bug调整(ctx.drawImage马完全的mask图片,添加图片加载在后回调函数) 3
#------刮的的时候儿点点点的问题解决 4
#----两个案例canvas或者wScratchPad-1.4.4
canvas自己实现麻烦的...韩式使用库jq 插件wScratchPad实现容易的...
作者 老哇的爪子 Attilax 艾龙, EMAIL:1466519819@qq.com
转载请注明来源: http://blog.csdn.net/attilax
#----1.添加panel ,这个十mask div.....postion:absoluti..高度宽度都是100%
<script type="text/javascript" src="../wScratchPad-1.4.4/wScratchPad.js"></script>
<div id="wScratchPad" style="display:inline-block; position:relative; border:solid black 1px;"></div>
#---2.初始化wScratchPad
(function (bodyStyle) {
bodyStyle.mozUserSelect = 'none';
bodyStyle.webkitUserSelect = 'none';
$("#wScratchPad").wScratchPad({
width : skrtAreaO5.width(),
height : skrtAreaO5.height(),
image : null,
image2 : "../images/crchcard.png",
size:20,
scratchDown : function (e, percent) {
console.log(percent);
ReadyclearO5(percent);
},
scratchMove : function (e, percent) {
console.log(percent);
ReadyclearO5(percent);
},
scratchUp : function (e, percent) {
console.log(percent);
ReadyclearO5(percent);
}
});
logx("-- add conver img ok");
})(document.body.style);
#-----判断抽奖机会已经用完and 遮罩挠完33%走自动清空mask..
function ReadyclearO5(percent) {
if ($("#awardChoiceNum").val() == 0) {
alert("抽奖机会已经用完");
return;
}
if (percent > 35)
$('#divCrchcard').hide();
}
#-----设置mask图片加载后的事件(初始化悬浮图片top位置>>ajax开始>>加载bingo/nobigon的div)
var skrtAreaO5 = $('#mainmainx');
var skrchImgLoadAfterEvent = function () {
$('#nobingoDiv').show();
iniAwardChoiceNum();
testShowBingoDiv();
iniBonusPicPositionNhit();
};
#---wScratchPad.js的几个bug调整(ctx.drawImage马完全的mask图片,添加图片加载在后回调函数)
.
drawImage: function(imagePath)
{
var $this = this;
var img = new Image();
img.src = imagePath;
$(img).load(function(){
//o59 attilax
//$this.ctx.drawImage(img, 0, 0
$this.ctx.drawImage(img, 0, 0,img.width,img.height,0,0,skrtAreaO5.width(),skrtAreaO5.height());
$this.setBgImage();
//ati add afgterEvent()
skrchImgLoadAfterEvent();
})
},
#------刮的的时候儿点点点的问题解决
原因:使用了点的原理来清空area....
可以添加点的size到30....或者使用line来清空area....
- Atitit .html5刮刮卡的gui实现总结
- atitit.Atitit. Gui控件and面板-----服务端控件 java struts的实现最佳实践
- Atitit.现在的常用gui技术与gui技术趋势评价总结
- atitit.gui界面纵向居中总结
- Atitit 发帖机实现(4 )- usbQBM1601 gui操作标准化规范与解决方案attilax总结
- atitit.GUI图片非规则按钮跟动态图片切换的实现模式总结java .net c# c++ web html js
- atitit.html5 拼图游戏的解决之道.
- atitit.浏览器web gui操作类库 和 操作chrome浏览器的类库使用总结
- Atitit html5.1 新特性attilax总结
- Atitit.javascript 实现类的方式原理大总结
- Atitit.auto complete 自动完成控件的实现总结
- atitit.词法分析的实现token attilax总结
- atitit.loading的设计与实现控件选型attilax 总结
- atitit.loading的设计与实现控件选型attilax 总结
- ATITIT.翻译模块的设计与实现 api attilax 总结
- Atitit.异步的实现模式attilax大总结
- Atitit 通用接口的设计与实现attilax 总结
- Atitit 通用接口的设计与实现attilax 总结
- atitit.常用编程语言的性能比较 c c++ java
- 急
- 特殊ASCII码查询
- jdk tomcat mysql安装
- 如何让vm虚拟机和主机同时上网
- Atitit .html5刮刮卡的gui实现总结
- 常用二极管,三极管参数
- GCC 4.8.2 编译安装小记
- 新的开始
- atitit. hb 原生sql跨数据库解决原理 获得hb 数据库类型运行期获得Dialect
- myeclipse10在win7下面出现中文变小的解决方法
- 段小白的JNI编程学习笔记
- 绝对值最大
- 一句话想法--网页与流量