HTML5 achieve mobile, PC-side scratch card effect

Just came back from the south of a scraping card effect of the page, special I in trouble how to use H5 to achieve this effect, finally wrote, the product actually said: "Since you can write this effect of course, I just want to let you realize click on the appearance!" ”... ... Why didn't you say it earlier????? Really asking for trouble. Since it is written to share to everyone, this effect is actually very early, but we do not use it. H5 's canvas I'm quite frankly saying I won't. But since the work needs to learn a bit. Although there is a demo but when you write, there are a lot of bugs. Let's talk about the steps to achieve the scratch card effect. (PS: According to my own demo)

Scratch Card Requirements :

1. Every user has three chance to scrape a card
2. The results of this scratch card will overwrite the previous results
3. The chance of winning a scratch card is presented as an incremental curve (guaranteed to win three times)
4. The results of scraping include buttons both (collect prizes or once again)
5. Share Event Prize Upgrade (this is mostly a shared callback)
6. Our own needs, today said how to make scratch card, there is such demand can find me to source

First, body create canvas

 <Divclass= "Info"ID= "Prize">     <spanID= "Prompt"></span>     <spanclass= "BTN"ID= "OK">Collect prizes</span>    <spanclass= "BTN"ID= "No">One more time</span> </Div> <CanvasID= "C1"class= "Canvas"></Canvas>

Here we first created a canvas and added a scratch effect to the bottom of the canvas.

Second, start initializing the canvas after the page loads

First define some of the required variables

var // Canvas var // Brushes var // flag whether the user presses the mouse or starts to touch var // flag whether the user has shaved more than half var null) ["Font-size"]); // This is to adjust the width of the scrape automatically with @media at different resolutions .

Start initializing the canvas after the page loads (this way you can create a canvas on the page)

Window.onload =function() {C1= document.getElementById ("C1"); //here is the key, canvas comes with two attributes width, height, I understand that the resolution of the canvas, with the style of width, height of different meanings.     //preferably set to the same size as the canvas on the page    //Otherwise, the coordinates in the canvas don't match the coordinates of the mouse.C1.width=C1.clientwidth; C1.height=C1.clientheight; CTX= C1.getcontext ("2d"); //PC-side processingC1.addeventlistener ("MouseMove", Eventmove,false); C1.addeventlistener ("MouseDown", Eventdown,false); C1.addeventlistener ("MouseUp", Eventup,false); //handling of the mobile sideC1.addeventlistener (' Touchstart ', Eventdown,false); C1.addeventlistener (' Touchend ', Eventup,false); C1.addeventlistener (' Touchmove ', Eventmove,false); //InitializeInitcanvas ();}

Third, gray-painted rectangles are covered

functionInitcanvas () {//The online approach is to set a background image for the canvas, and I'm doing this by placing a div directly underneath the canvas.     //c1.style.backgroundimage= "url (winning picture. jpg)";Ctx.globalcompositeoperation = "Source-over"; Ctx.fillstyle= ' #aaaaaa '; Ctx.fillrect (0,0, C1.clientwidth,c1.clientheight);     Ctx.fill (); Ctx.font= "Bold 30px Arial"; Ctx.textalign= "Center"; Ctx.fillstyle= "#999999"; Ctx.filltext ("Scrape", c1.width/2,50);//Set this property to this to make the effect of a round eraser//Some old mobile phone comes with a browser does not support Destination-out, the following code has the method of repairctx.globalcompositeoperation = ' Destination-out ';}

Four, the mouse press and touch start

function Eventdown (e) {    e.preventdefault ();    Ismousedown=true;}

V, mouse lift and Touch end

functionEventup (e) {e.preventdefault (); //get all the data from the canvas    varA = Ctx.getimagedata (0,0, C1.width,c1.height); varJ=0;  for(varI=3;i<a.data.length;i+=4){        if(a.data[i]==0) J + +; }    //when the area being scratched is equal to half, you can start processing the result    if(J&GT;=A.DATA.LENGTH/8) {isOk = 1; } Ismousedown=false; }

VI, mouse movement and Touch movement

 //mouse movement and Touch movement functionEventmove (e) {e.preventdefault (); if(ismousedown) {if(e.changedtouches) {e=e.changedtouches[e.changedtouches.length-1]; }         varTopy = document.getElementById ("Top"). OffsetTop; varOX =C1.offsetleft, OY= c1.offsettop+topy; varx = (E.clientx + document.body.scrollLeft | | e.pagex)-OX | | 0, y= (E.clienty + document.body.scrollTop | | e.pagey)-OY | | 0; //Draw 360 degrees arc, is a circle, because set the Ctx.globalcompositeoperation = ' destination-out ';         //the painting is transparent.Ctx.beginpath (); Ctx.arc (x, y, Fontem*1.2, 0, Math.PI * 2,true); //the following 3 lines of code are to repair some mobile browsers that do not support destination-out         //and I'm not quite sure what the rationale is.C1.style.display = ' None ';         C1.offsetheight; C1.style.display= ' Inherit ';     Ctx.fill (); }     if(isOk) {varBTN = Document.getelementsbyclassname ("btn");  for(vari=0; i<btn.length; i++) {Btn[i].style.zindex= ' 3 '; } document.getelementsbyclassname ("BTN") [0].style.zindex= "3"; } }

Seventh: If there is no pumping, one more time.

Obviously, one more time is to initialize all values, the canvas reloads, but if there are times limit requirements, be sure to calculate here.

Note: As we ask for more than today do not say how to calculate the probability of winning methods. The desired effect version can be found on my own case. Write the wrong place to welcome the point.

DEMO Download Please click on the link

HTML5 achieve mobile, PC-side scratch card effect