Shulou(Shulou.com)06/03 Report--

How to use HTML5 to achieve scratch card effect, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain in detail for you, people with this need can come to learn, I hope you can gain something.

Have you ever played with scratch cards? The kind that can win the lottery by accident. Today, I would like to share with you a scratch card effect based on HTML5 technology. On PC, you only need to hold down the mouse. On the phone, you only need to hold down your finger and gently scratch off the layer to simulate the real scratch effect.

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.

Var bodyStyle = 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.

Var img = new Image (); var canvas = document.querySelector ('canvas'); canvas.style.backgroundColor='transparent'; canvas.style.position =' absolute'; var imgs = ['prun0.jpg']; var num = 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, and eventMove () defines the movement event, in which when pressed, the coordinate displacement is obtained, and small dots are drawn through arc (x, y, 10, 0, Math.PI * 2).

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

Finally, call the above functions through canvas, draw the graph, listen for touch and mouse events, and call the corresponding functions. See the code:

Img.addEventListener ('load', function (e) {/ /.. Follow 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 the 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 DEMO, you can according to the actual needs, combined with the background program and database, complete a real scratch card program.

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.