Html5 implements scratch on mobile terminals and PCs, and html5 scratch on cards

Html5 implements scratch on mobile terminals and PCs, and html5 scratch on cards

Just as I got back from the South, I got a page with a scratch effect. How can I use H5 to achieve this effect? It's hard to write it out. The product said: "Since you can write this effect, it is certainly better. At first, I just want to let you click it! "... ... Why didn't Nima say it earlier ????? It's really troublesome. Since I have written it, I will share it with you. This effect has been available for a long time, but we don't often use it. I can't say that I won't. But now that you need to study at work. Although there are demos, many bugs still occur during self-writing. The following describes how to implement the scratch card effect. (Ps: According to my demo)

<Div class = "info" id = "prize"> <span id = "prompt"> </span> <span class = "btn" id = "OK"> receive prize </span> <span class = "btn" id = "no"> next time </span> </div> <canvas id = "c1" class = "canvas"> </canvas>

 

Here, we first create a Canvas and add the scratch effect to the bottom of the canvas.

2. initialize the canvas after page loading

First, define some required variables.

Var c1; // canvas var ctx; // brush var ismousedown; // indicates whether the user presses the mouse or starts to touch var isOk = 0; // indicates whether the user has scratched more than half of var fontem = parseint(registry.getcomputedstyle(document.doc umentElement, null) ["font-size"]); // This is used in combination with @ media to automatically adjust the width of the scratch at different resolutions

 

Initialize the canvas after the page is loaded (you can create a canvas on the page)

Window. onload = function () {c1 = document. getElementById ("c1"); // The key here is that the canvas has two attributes: width and height. I think the canvas resolution is different from the width and height in the style. // It is best to set it to the actual size of the canvas on the page. // otherwise, the coordinates in the canvas and the coordinates of the mouse cannot match c1.width = c1.clientWidth; c1.height = c1.clientHeight; ctx = c1.getContext ("2d"); // process c1.addEventListener ("mousemove", eventMove, false) on the PC end; c1.addEventListener ("mousedown", eventDown, false ); c1.addEventListener ("mouseup", eventUp, false); // mobile terminal processing c1.addEventListener ('touchstart', eventDown, false); c1.addEventListener ('touchend', eventUp, false ); c1.addEventListener ('touchmove ', eventMove, false); // initialize initCanvas ();}

 

3. Fill the gray rectangle

Function initCanvas () {// The online method is to set a background image for canvas. Here, I put a div // c1.style directly under canvas. backgroundImage = "url(.jpg)"; ctx. globalCompositeOperation = "source-over"; ctx. fillStyle = '# aaaaaa'; ctx. fillRect (0, 0, c1.clientWidth, c1.clientHeight); ctx. fill (); ctx. font = "Bold 30px Arial"; ctx. textAlign = "center"; ctx. fillStyle = "#999999"; ctx. fillText ("Scratch", c1.width ); // set this attribute to this to make a circular eraser effect. // some old mobile phones use browsers that do not support destination-out. The following code provides a solution for ctx. globalCompositeOperation = 'destination-out ';}

 

4. Press the mouse and start with touch

function eventDown(e){    e.preventDefault();    ismousedown=true;}

 

5. Move the mouse up and touch the end

Function eventUp (e) {e. preventDefault (); // obtain all data of the canvas var a = ctx. getImageData (0, 0, c1.width, c1.height); var j = 0; for (var I = 3; I <. data. length; I + = 4) {if (. data [I] = 0) j ++;} // when the split area is half, you can start processing the result if (j> =. data. length/8) {isOk = 1;} ismousedown = false ;}

 

6. Move the mouse and touch

// Move the mouse and touch the function eventMove (e) {e. preventDefault (); if (ismousedown) {if (e. changedTouches) {e = e. changedTouches [e. changedTouches. length-1];} var topY = document. getElementById ("top "). offsetTop; var oX = c1.offsetLeft, oY = c1.offsetTop + topY; var x = (e. clientX + document. body. scrollLeft | e. pageX)-oX | 0, y = (e. clientY + document. body. scrollTop | e. pageY)-oY | 0; // draw an arc of 360 degrees, which is a circle because ctx is set. globalCompositeOperation = 'destination-out'; // The painting is transparent ctx. beginPath (); ctx. arc (x, y, fontem * 1.2, 0, Math. PI * 2, true); // The following three lines of code are used to fix the fact that some mobile Browsers Do not support destination-out. // I am not very clear about the principle of c1.style. display = 'none'; c1.offsetHeight; c1.style. display = 'herit'; ctx. fill ();} if (isOk) {var btn = document. getElementsByClassName ("btn"); for (var I = 0; I <btn. length; I ++) {btn [I]. style. zIndex = '3';} document. getElementsByClassName ("btn") [0]. style. zIndex = "3 ";}}

 

7. Try again if you have not selected

Obviously, the next time is to initialize all values and reload the canvas. However, if you need to limit the number of times, make sure to calculate it clearly here.

Note: As we have many requirements, today we will not discuss how to calculate the winning probability. If you need an effect version, you can contact me for a case. If you have written an error, please note it.

 

DEMOClick the link for download