Atitit .html5刮刮卡的gui实现总结

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....