HTML5 canvas labels implement scratch effect, html5 scratch card

HTML5 canvas labels implement scratch effect, html5 scratch card
This article mainly introduces the HTML5 canvas tag to achieve scratch effect. This article provides the running effect, HTML code and JS Code, and provides the complete source code download. For more information, see

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.

Download source code: Click to download

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.

The Code is as follows:
<Canvas> </canvas>


Javascript

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

The Code is as follows:
Var bodyStyle = document. body. style;
BodyStyle. Required userselect = '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.

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 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.

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 a 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:

The Code is as follows:
Img. addEventListener ('load', function (e ){
// .. Link 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 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. You can combine background programs and databases to complete a real scratch program based on your actual needs.