Using HTML5 canvas canvas to realize _javascript technique of scraping card effect

First to show you the effect:

View Demo Source Download

Have you ever played a scratch card? The kind that can be won by carelessness. Today I would like to share a HTML5 technology based on the scraping card effect, on the PC just hold down the mouse, on the phone you just hold your finger, gently scraping the layer can simulate the real Scratch award effect.

We use the HTML5 canvas canvas, combined with its API, to draw a gray layer on the canvas elements, and then by detecting the user mouse to move and gesture to draw a transparent graphics, so you can see the canvas background of the real picture, to achieve the scraping card effect.

Html

All we need to do is add the canvas tag element to the page and the rest to the JavaScript. Note that the canvas element is a HTML5 element that runs on a modern browser that supports HTML5.

Javascript

First of all, we want to disable the mouse to select the drag event, that is, do not run the check operation.

var bodystyle = Document.body.style; 
Bodystyle.mozuserselect = ' None '; 

Then we define the picture class, get the canvas element, and set the background and position properties. We used two random photos in this example, each refreshing a random picture as the background.

var img = new Image (); 
var canvas = document.queryselector (' canvas '); 
canvas.style.backgroundcolor= ' Transparent '; 
canvas.style.position = ' absolute '; 
var IMGs = [' p_0.jpg ', ' p_1.jpg ']; 
var num = Math.floor (math.random () *2); 

And then into the main body, when the picture is loaded, 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, gets the coordinate displacements and draws the dots through arcs (x, y, 0, Math.PI * 2).

Img.addeventlistener (' Load ', function (e) { 
 var ctx; 
 var w = img.width, 
  h = img.height; 
 var OffsetX = canvas.offsetleft, 
  OffsetY = canvas.offsettop; 
 var MouseDown = false; 
 function Layer (CTX) { 
  Ctx.fillstyle = ' Gray '; 
  Ctx.fillrect (0, 0, W, h); 
 } 
 function Eventdown (e) { 
  e.preventdefault (); 
  mousedown=true; 
 } 
 function Eventup (e) { 
  e.preventdefault (); 
  Mousedown=false; 
 } 
 function Eventmove (e) { 
  e.preventdefault (); 
  if (MouseDown) { 
    if (e.changedtouches) { 
     e=e.changedtouches[e.changedtouches.length-1]; 
    } 
    var x = (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, 0, Math.PI * 2);//Draw dot 
     fill (); 
 }}} //... 

Finally, call the above function through canvas, draw graphics, and listen for touch and mouse events, call the corresponding function, see Code:

Img.addeventlistener (' Load ', function (e) { 
 //...) Connect the code 
 canvas.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 Rectangular 
 layer (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); 
 

The above content for reference only, we can combine the actual situation, combined with the background program and database, to complete a real scraping music. The above content is I write the use HTML5 canvas canvas to realize scraping the card effect, hoped everybody likes.