Using HTML5 to achieve scratch card effect

Article Source: PHP Development Learning Portal

Address: http://www.phpthinking.com/archives/525

Have you ever played a scratch card? The kind of lottery that can be accidentally won. Today I will share a scratch card based on HTML5 technology, just hold down the mouse on the PC, on the phone you just hold the finger, gently scraping the layer can simulate the real Scratch award effect.

We use the canvas of HTML5, combined with the API it provides, to draw a gray mask on the canvas element, and then draw a transparent graphic by detecting the user's mouse cursor and gestures, so that you can see the real picture in the canvas background to achieve the scratch card effect.

Click to download the source code

Html

I We just need to add the canvas tag element to the page, and the rest will look at JavaScript. Note that the canvas element is a HTML5 element and runs on a modern browser that supports HTML5.

 <canvas></canvas> 

Javascript

First, we want to disable the mouse on the page to select the dragged event, or do not run the Select action.

 var bodyStyle = document.body.style; bodyStyle.mozUserSelect = ‘none‘; bodyStyle.webkitUserSelect = ‘none‘; 

We then define the picture class, get the canvas elements, and set the background and location properties. In this example, we use two random photos, one at a time to refresh a random picture as the background.

varIMG =NewImage ();varCanvas = Document.queryselector (' Canvas '); Canvas.style.backgroundcolor=' Transparent '; Canvas.style.position =' Absolute ';varIMGs = [' p_0.jpg ',' p_1.jpg '];varnum =Math. Floor (Math. Random () *2); IMG.SRC = Imgs[num];

Then go to the main body, when the image loading is detected, first define some properties and functions, function layer () to draw a gray square, Eventdown () defines the press event Eventup () defines the release event, Eventmove () defines the move event, When pressed, the coordinates are shifted and the dots are drawn by arc (x, y, 0, Math.PI * 2).

Img.addeventlistener (' Load ',function(e){varCTxvarW = img.width, h = img.height;varOffsetX = canvas.offsetleft, OffsetY = canvas.offsettop;varMouseDown = false;functionLayer (CTX){Ctx.fillstyle =' Gray '; Ctx.fillrect (0,0, W, h);} functionEventdown (e){E.preventdefault (); Mousedown=true;}functionEventup (e){E.preventdefault (); Mousedown=false;}functionEventmove (e){E.preventdefault ();if(MouseDown){if(e.changedtouches){E=e.changedtouches[e.changedtouches.length-1];}varx = (E.clientx + document.body.scrollLeft | | e.pagex)-OffsetX | |0, y = (e.clienty + document.body.scrollTop | | e.pagey)-OffsetY | |0; with(CTX){Beginpath () arc (x, Y,Ten,0,Math. PI *2);//Draw DotsFill ();}}}//... });

Finally, by calling the above function through the canvas, drawing the graph, and listening for touch and mouse events, call the corresponding function, see the code:

Img.addeventlistener (' Load ',function(e){ //.. Connect to the previous segment of codeCanvas.width=w;     Canvas.height=h; Canvas.style.backgroundimage=' url ('+img.src+' ) '; Ctx=canvas.getcontext (' 2d '); ctx.fillstyle=' Transparent '; Ctx.fillrect (0,0, W, h);//Draw RectangleLayer (CTX); Ctx.globalcompositeoperation =' Destination-out '; Canvas.addeventlistener (' Touchstart ', Eventdown); Canvas.addeventlistener (' Touchend ', Eventup); Canvas.addeventlistener (' Touchmove ', Eventmove); Canvas.addeventlistener (' MouseDown ', Eventdown); Canvas.addeventlistener (' MouseUp ', Eventup); Canvas.addeventlistener (' MouseMove ', Eventmove);

You can download the full code in the demo, you can according to the actual needs, combined with the background program and database, complete a real scratch card program.

Using HTML5 to achieve scratch card effect