HTML5 achieve mobile, PC-side scratch card effect

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

<div class= "info" id= "prize" >     <span id= "Prompt" ></span>     <span class= "btn" id= "OK" > Collect prizes </span>    <span class= "btn" id= "no" > One more </span> </div> <canvas id= "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 C1; Canvas Var ctx; Brush Var Ismousedown; Flag whether the user presses the mouse or starts to touch var isok=0; Flag whether the user has scraped more than half of the var Fontem = parseint (window.getComputedStyle (document.documentelement, null) ["Font-size"]); v// 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 canvas as the actual size of the page    //or the coordinates in the canvas and the mouse coordinates can not match    c1.width=c1.clientwidth;    C1.height=c1.clientheight;    CTX = C1.getcontext ("2d");    PC-side processing    c1.addeventlistener ("MouseMove", eventmove,false);    C1.addeventlistener ("MouseDown", eventdown,false);    C1.addeventlistener ("MouseUp", eventup,false);    Mobile-side processing    c1.addeventlistener (' Touchstart ', eventdown,false);    C1.addeventlistener (' Touchend ', eventup,false);    C1.addeventlistener (' Touchmove ', eventmove,false);    Initialize    Initcanvas ();}

Third, gray-painted rectangles are covered

function Initcanvas () {//Online The practice is to set a background picture for canvas, and I'm doing this by placing a div     //c1.style.backgroundimage= "url" directly underneath the canvas ( Winning pictures. 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 the effect of a round eraser     ///Some old phone comes with a browser does not support Destination-out, the following code has the method of repair     ctx.globalcompositeoperation = ' destination-out ';}

Four, the mouse press and touch start

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

V, mouse lift and Touch end

function Eventup (e) {    e.preventdefault ();    Get all the data from the canvas    var a = Ctx.getimagedata (0,0,c1.width,c1.height);    var j=0;    for (Var i=3;i<a.data.length;i+=4) {        if (a.data[i]==0) j + +;    }    When the area being scraped is equal to half, you can start processing the result    if (J>=A.DATA.LENGTH/8) {        isOk = 1;    }    Ismousedown=false; }

VI, mouse movement and Touch movement

 Mouse movement and Touch move function Eventmove (e) {e.preventdefault ();         if (Ismousedown) {if (e.changedtouches) {e=e.changedtouches[e.changedtouches.length-1];         } var topy = document.getElementById ("Top"). OffsetTop;         var OX = c1.offsetleft, OY = c1.offsettop+topy; var x = (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 ';         Draw out is transparent ctx.beginpath ();         Ctx.arc (x, y, fontem*1.2, 0, Math.PI * 2,true);         The following 3 lines of code is to fix some mobile browsers that do not support destination-out//I am not quite sure what the principle of this is C1.style.display = ' none ';         C1.offsetheight;          C1.style.display = ' Inherit ';     Ctx.fill ();             } if (isOk) {var btn = document.getelementsbyclassname ("btn");   for (var i=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.

HTML5 achieve mobile, PC-side scratch card effect