HTML5 canvas tag implements scratch card effect_html5 tutorial skills

Have you ever played scratch cards? The kind where you can win a prize by accident. Today I will share with you a scratch card effect based on HTML5 technology. On PC, you only need to hold down the mouse. On mobile phones, you only need to hold down your finger and gently scrape off the layer to simulate the real scratch effect.

Source code download: Click to download

We use the HTML5 Canvas, combined with the API it provides, to draw a gray mask layer on the Canvas element, and then draw a transparent graphic by detecting the user's mouse movement and gestures, so that you can see the Canvas background Real pictures can achieve the scratch card effect.

HTML

We only need to add the canvas tag element to the page, and the rest depends on JavaScript. Note that the canvas element is an element unique to HTML5 and runs on modern browsers that support HTML5.

Copy code

The code is as follows:

Javascript

First of all, we need to disable the mouse selection and drag event of the page, that is, not to execute the selection operation.

Copy code

The code is as follows:

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

Then we define the image class, get the canvas element, and set the background and position attributes. We use two random photos in this example, and refresh a random photo as the background each time.

Copy code

The code is as follows:

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 main body. When it is detected that the image is loaded, first define some properties and functions. The function layer() is used to draw a gray square. eventDown() defines the press event. eventUp() defines the release event. eventMove () defines the movement event, in which when pressed, the coordinate displacement is obtained and the small dot is drawn through arc(x, y, 10, 0, Math.PI * 2).

Copy code

The code is as follows:

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, call the above functions through canvas, draw graphics, listen for touch and mouse events, and call the corresponding functions. Please see the code:

Copy code

The code is as follows:

img.addEventListener('load', function(e) {
//..Continued from the previous 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 download the complete code in the DEMO, and you can combine it with the background according to actual needs Program and database to complete a real scratch card program .