Atitit .html5刮刮卡的gui实现总结
Atitit .html5刮刮卡的gui实现总结
#----两个案例canvas或者wScratchPad-1.4.4 1
#----1.添加panel ,这个十mask div.....postion:absoluti..高度宽度都是100% 1
#-----判断抽奖机会已经用完and 遮罩挠完33%走自动清空mask.. 2
#-----设置mask图片加载后的事件(初始化悬浮图片top位置>>ajax开始>>加载bingo/nobigon的div) 3
#---wScratchPad.js的几个bug调整(ctx.drawImage马完全的mask图片,添加图片加载在后回调函数) 3
#----两个案例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....
