Atitit .html5刮刮卡的gui實現總結

標籤：style   blog   java   c   tar   ext   

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:[email protected]

轉載請註明來源： 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....