Use HTML5 for Scratch Effect

Use HTML5 for Scratch Effect

 

Have you ever used scratch cards? The one that won the prize accidentally. Today, I will share with you a scratch card Effect Based on HTML5 technology. You only need to hold your mouse down on the PC, and you only need to hold your finger on the mobile phone, click the scratch layer to simulate the real scratch effect.

We use the Canvas of HTML5 and its provided API to draw a gray masked layer on the Canvas element, and then draw a transparent image by detecting the user's mouse movement and gesture, in this way, you can see the real image in the Canvas background to achieve the scratch effect.

Click to download source code

HTML

We only need to add the canvas tag element to the page, and the others will be javascript. Note that the canvas element is only available in HTML5 and runs on modern browsers that support HTML5.

Javascript

First, we want to disable the mouse-selected drag event on the page, that is, do not run the selected operation.

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

Next we define the image class, get the canvas element, and set the background and location attributes. In this example, we use two random photos. Each time we refresh a random image 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); img.src = imgs[num]; 

Then enter the subject. When the image is detected to be loaded, define some attributes and functions first. The function layer () is used to draw a gray square, eventDown () the following event eventUp () defines the release event, and eventMove () defines the moving event. When the event is pressed, the coordinate displacement is obtained, and the arc (x, y, 10, 0, Math. PI * 2) to draw small dots.

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 the dot fill ();}}}//...});

Finally, use canvas to call the above functions, draw images, listen for touch and mouse events, and call the corresponding functions. Please refer to the Code:

Img. addEventListener ('load', function (e ){//.. connect to 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 a rectangular layer (ctx); ctx. globalCompositeOperation = 'destination-out'; canvas. addEventListener ('touchstart', eventDown); canvas. addEventListener ('touchend', eventUp); canvas. addEventListener ('touchmove ', eventMove); canvas. addEventListener ('mouseunder', eventDown); canvas. addEventListener ('mouseup', eventUp); canvas. addEventListener ('mousemove ', eventMove );

You can download the complete code in the DEMO. You can combine background programs and databases to complete a real scratch program based on your actual needs.