How to realize the effect of scraping Card with html

This article will explain in detail how to achieve the scraping card effect in html. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Using HTML5 to realize the effect of scratching card

View the demo and download the source code

We use HTML5's canvas Canvas, combined with the API provided by it, to draw a gray mask on the Canvas element, and then draw a transparent figure by detecting the user's mouse movement and gestures, so that we can see the real picture under the Canvas background and achieve the scratch effect.

HTML

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

Javascript

First of all, we want to disable the mouse selection and drag event of the page, that is, do not run to perform the select operation.

VarbodyStyle=document.body.style

BodyStyle.mozUserSelect='none'

BodyStyle.webkitUserSelect='none'

Then we define the picture class, get the canvas element, and set the background and location properties. In this example, we use two random photos, one random picture at a time as the background.

Realization of scratch Card Code by HTML5

Varimg=newImage ()

Varcanvas=document.querySelector ('canvas')

Canvas.style.backgroundColor='transparent'

Canvas.style.position='absolute'

Varimgs= ['prun0.jpg.jpg']

Varnum=Math.floor (Math.random () * 2)

Img.src=imgs [num]

Then enter the main body, when it is detected that the picture 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 small dots are drawn by arc (xMaginyMax.PItem2).

This is the end of the article on "how to achieve the scraping card effect in html". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.