Using HTML5 to achieve scratch card effect

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.

Tutorial Address: http://www.helloweba.com/view-blog-270.html

Demo Address: http://www.helloweba.com/demo/guaguaka/

SOURCE Download: http://www.helloweba.com/down-270.html

Using HTML5 to achieve scratch card effect