Atitit. html5 scratch card gui implementation Summary

Atitit. html5 scratch card gui implementation Summary

 

 

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

# ---- 1. Add the panel. The height and width of the ten mask div ...... postion: absolti... are both 100% and.

# --- 2. initialize wScratchPad 1

# ----- Determine whether the lucky draw opportunity has been used up and the mask has been scratched 33% and the mask .. 2 is automatically cleared

# ----- Set the events after the mask image is loaded (initialize the top position of the floating image> ajax Start> load the div of bingo/nobigon) 3

# --- WScratchPad. js bug adjustment (ctx. drawImage completely mask image, add the callback function after loading the image) 3

# ------ Solve the problem by a few clicks during scratch 4

 

 

 

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

 

Canvas implementation troubles... Korean-style use library jq plug-in wScratchPad implementation is easy...

 

Author old wow's paw Attilax iron, EMAIL: 1466519819@qq.com

Reprinted please indicate Source: http://blog.csdn.net/attilax

# ---- 1. Add the panel. The height and width of the ten mask div ...... postion: absolti... are both 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. initialize wScratchPad

 

(Function (bodyStyle ){

 

BodyStyle. Required userselect = '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 );

 

# ----- Determine whether the lottery opportunity has been used up and the mask has been scratched for 33% and the mask is automatically cleared ..

Function ReadyclearO5 (percent ){

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

Alert ("lottery opportunities are used up ");

Return;

}

If (percent> 35)

$ ('# DivCrchcard'). hide ();

}

 

# ----- Set the events after the mask image is loaded (initialize the top position of the floating image> ajax> load the div of bingo/nobigon)

 

Var skrtAreaO5 =5 ('# mainmainx ');

Var skrchImgLoadAfterEvent = function (){

$ ('# NobingoDiv'). show ();

IniAwardChoiceNum ();

TestShowBingoDiv ();

IniBonusPicPositionNhit ();

 

};

 

# --- Adjust several bugs in wScratchPad. js (ctx. drawImage is a complete mask image, and add the callback function after loading the image)

.

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, skrtAreaO5.width (), skrtAreaO5.height ());

$ This. setBgImage ();

// Ati add afgterEvent ()

SkrchImgLoadAfterEvent ();

})

},

 

 

# ------ Solve the problem point by point during scratch

Cause: the dot principle is used to clear the area ....

You can add the dot size to 30... or use line to clear area ....