Atitit .html5刮刮卡的gui实现总结
2014-05-11 23:36
148 查看
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
作者 老哇的爪子 Attilax 艾龙, EMAIL:1466519819@qq.com
转载请注明来源: http://blog.csdn.net/attilax
<div id="wScratchPad" style="display:inline-block; position:relative; border:solid black 1px;"></div>
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);
if ($("#awardChoiceNum").val() == 0) {
alert("抽奖机会已经用完");
return;
}
if (percent > 35)
$('#divCrchcard').hide();
}
var skrchImgLoadAfterEvent = function () {
$('#nobingoDiv').show();
iniAwardChoiceNum();
testShowBingoDiv();
iniBonusPicPositionNhit();
};
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();
})
},
可以添加点的size到30....或者使用line来清空area....
#----两个案例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 .html5刮刮卡的gui实现总结
- Atitit 发帖机实现(4 )- usbQBM1601 gui操作标准化规范与解决方案attilax总结
- Atitit 发帖机实现(4 )- usbQBM1601 gui操作标准化规范与解决方案attilax总结
- atitit.js javascript 调用c# java php后台语言api html5交互的原理与总结p97
- Atitit (Sketch Filter)素描滤镜的实现 图像处理 attilax总结
- Atitit (Sketch Filter)素描滤镜的实现 图像处理 attilax总结
- Atitit java c# php c++ js跨语言调用matlab实现边缘检测等功能attilax总结
- atitit.js javascript 调用c# java php后台语言api html5交互的原理与总结p97
- Atitit (Sketch Filter)素描滤镜的实现 图像处理 attilax总结
- Atitit mongodb 使用总结 1.1. 下载有点不太好下载不像mysql导出都是。。70M 1 1.2. gui工具Robomongo(MongoDB/GUI管理工具) v1.0.3 官方
- atitit.软件开发GUI 布局管理优缺点总结java swing wpf web html c++ qt php asp.net winform
- Atitit (Sketch Filter)素描滤镜的实现 图像处理 attilax总结v2
- Atitit java c# php c++ js跨语言调用matlab实现边缘检测等功能attilax总结
- atitit.js javascript 调用c# java php后台语言api html5交互的原理与总结p97
- Atitit 三种并发编程模型 艾龙 attilax总结 1. 并发系统可以使用不同的并发模型去实现。 1 2. 并行工作者 并行工作者模型。进来的任务分配给不同的工作者 银行模式 2 2.1.
- atitit.导出excel的设计----查询结果 导出为excel的实现java .net php 总结
- Atitit 通用接口的设计与实现attilax 总结
- Atitit.现在的常用gui技术与gui技术趋势评价总结
- Atitit 图像清晰度 模糊度 检测 识别 评价算法 源码实现attilax总结