» » Use HTML5 to achieve scratchcard effect

 

Use HTML5 to achieve scratchcard effect

Author: bamboo06 on 27-10-2014, 02:24, views: 1464

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.

Category: HTML5

Dear visitor, you are browsing our website as Guest.
We strongly recommend you to register and login to view hidden contents.
<
  • 0 Comments
  • 0 Articles
7 October 2017 05:25

farman

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Thank you for helping us out here. And now, if you can help us out by tell if darwinessay legit or not then I would appreciate your work a lot.

<
  • 0 Comments
  • 0 Articles
15 October 2017 10:05

ali

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
It is somewhat fantastic, and yet check out the advice at this treat. Secrets To Dog Training

Cool you inscribe, the info is really salubrious further fascinating, I'll give you a connect to my scene. Stroke of Genius System

<
  • 0 Comments
  • 0 Articles
15 October 2017 22:19

david

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Thank you to everyone for the answers here. These answers will really help me in my Virtual Reality Headset For IOS and I could not have asked for more right now. I am just so happy that I have what I wanted.

<
  • 0 Comments
  • 0 Articles
17 October 2017 02:09

ali

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Cool you write, the information is very good and interesting, I'll give you a link to my site. The Penguin Method

<
  • 0 Comments
  • 0 Articles
28 October 2017 02:20

frank

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Just admiring your work and wondering how you managed this blog so well. It’s so remarkable that I can't afford to not go through this valuable information whenever I surf the internet! mobile strike gold hack

<
  • 0 Comments
  • 0 Articles
4 November 2017 21:08

carl

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Thanks for the blog filled with so many information. Stopping by your blog helped me to get what I was looking for. Now my task has become as easy as. check it here


Add comments

Name:*
E-Mail:
Comment:
Bold Italic Underline Strike | Align left Center Align right | Insert smilies Insert link URLInsert protected URL Select color | Add Hidden Text Insert Quote Convert selected text from selection to Cyrillic (Russian) alphabet Insert spoiler
Security Code: *