GOOCODE - Find your code/scripts

6 scratchcard you played it? You can win accidentally. Today I have to share a scratchcard effect based on HTML5 technology implemented on a PC simply hold down the mouse button on the phone that you simply hold down the finger, gently scrape layers can simulate real scratch card effect.

We use the HTML5 canvas, combined with its API provided, draw a gray mask layer on the Canvas element, and then to draw a transparent graphical user by detecting mouse moves and gestures, so you can see the real picture under Canvas background , reached scratchcard effect.
HTML
We only need to add canvas tag element on the page, the other to see the javascript. Note HTML5 canvas element is only element in modern browsers support HTML5 to run.

<canvas></canvas>

javascript
First, we want to disable the mouse to drag the selected pages event, just do not run to perform the selected action.

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

Then we define the class pictures, access to the canvas element, and set the background and location attributes. We used two random photos in this case, each refresh random picture as a 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); 
img.src = imgs[num]; 

Then enter the body when the detected image loading finished, first define some attributes and functions, function layer () is used to draw a gray square, eventDown () defines a press event eventUp () defines the release event, eventMove () defines the mobile event, wherein, when pressed, to obtain the coordinates of the displacement, and to draw a small dot by arc (x, y, 10, 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, 10, 0, Math.PI * 2);//draw circle
                 fill(); 
             } 
        } 
    } 
 
    //... 
}); 

Finally, call the above function by canvas, draw graphics, and listen for touch and mouse events, call the appropriate function, see the code:

img.addEventListener('load', function(e) { 
    //..Connect segment 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 a rectangle
    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); 
    canvas.addEventListener('mousemove', eventMove); 

You can according to the actual demand, combined with a database daemon to complete a real scratchcard program.