Atitit. Summary of the GUI implementation of HTML5 scraping card

Atitit. Summary of the GUI implementation of HTML5 scraping card

#---- Two cases canvas or wScratchPad-1.4.4 1

#----1. Add Panel, this 10 Mask Div.....postion:absoluti. the height of the width is 100% 1

#---2. Initialize Wscratchpad 1

#-----To judge that the lottery has run out and the mask is completely scratched 33% walk automatically empty mask: 2

#----- settings mask picture loaded event ( initialize hover picture top position >>ajax start >> load bingo/nobigon div) 3

#---wscratchpad.js several bug tweaks (ctx.drawimage horse full mask picture , add picture loaded in post callback function ) 3

#------Scrape a little bit of problem solving 4

#----Two casesCanvasorwScratchPad-1.4.4

Canvas itself to achieve trouble ... Korean Use library JQ Plugins Wscratchpad easy to achieve ...

Author of Old Wow's paw attilax ayron, email:[email protected]

Reprint please indicate source: Http://blog.csdn.net/attilax

#----1.AddPanel,this 10Mask Div.....postion:absoluti.the height of the width is100%

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

(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);

#-----Judging that the lottery has run out . andThe mask is finished scratching33%Go auto-emptyMask:

function ReadyclearO5 (percent) {

if ($ ("#awardChoiceNum"). val () = = 0) {

Alert ("The Lottery has run out ");

Return

}

If (Percent > 35)

$ (' #divCrchcard '). Hide ();

}

#-----SetMaskevents after the picture is loaded(Initialize hover pictureToplocation>>ajaxStart>>LoadingBingo/nobigonof theDiv)

var skrtAreaO5 = $ (' #mainmainx ');

var skrchimgloadafterevent = function () {

$ (' #nobingoDiv '). Show ();

Iniawardchoicenum ();

Testshowbingodiv ();

Inibonuspicpositionnhit ();

};

#---Wscratchpad.jsof severalBugAdjustment(Ctx.drawimage Horse Full ofMaskImage,add picture load in post callback function)

.

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 ();

})

},

#------It's a little bit of a problem to solve when you shave .

Reason : Use the principle of point to empty area ... .

You can add a size of a point to ... . or use Line to clear Area ....