Use the Canvas of HTML5 to implement the scratch effect.

Use the Canvas of HTML5 to implement the scratch effect.

First, we will show you the effect:

View demo source code download

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.

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.

<canvas></canvas> 

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 );

The above content is for reference only. You can combine the background program and database based on the actual situation to complete a truly smooth operation. The above content is written by me using the Canvas of HTML5 to achieve the scratch effect. I hope you will like it.