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

First, we will show you:

Scratch card requirements:

Each user has three chances of scratch cards.
The result of this scratch will overwrite the previous result.
The chance of winning a scratch card is shown in an ascending curve (ensure that one win is required in three times)
The scraped result contains both buttons (receive the prize or try again)
Prize upgrade for sharing activities (the callback for sharing is used here)
We have our own requirements. Today we will talk about how to create scratch cards. If you have such requirements, please contact me for the source code.

1. Create a Canvas with the body

Copy XML/HTML Code to clipboard

1. <Div class = "info" id = "prize">
2. <Span id = "prompt"> </span>
3. <Span class = "btn" id = "OK"> receive prize </span>
4. <Span class = "btn" id = "no"> try again </span>
5. </Div>
6. <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.

Copy XML/HTML Code to clipboard

1. Var c1; // canvas
2. Var ctx; // paint brush
3. Var ismousedown; // indicates whether the user clicks the mouse or starts to touch
4. Var isOk = 0; // indicates whether more than half of the user has been scratched
5. Var fontem = parseInt(window.getComputedStyle(document.doc umentElement, null) ["font-size"]); // This is used 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)

Copy XML/HTML Code to clipboard

1. Window. onload = function (){
2. C1 = document. getElementById ("c1 ");
3. // The key here is that canvas has two attributes: width and height. I think the canvas resolution is different from width and height in style.
4. // It is best to set the size to the same as the actual size of the canvas on the page.
5. // Otherwise, the coordinates in the canvas cannot match the coordinates of the mouse.
6. C1c1. width = c1.clientWidth;
7. C1c1. height = c1.clientHeight;
8. Ctx = c1.getContext ("2d ");
9. // PC-side Processing
10. C1.addEventListener ("mousemove", eventMove, false );
11. C1.addEventListener ("mousedown", eventDown, false );
12. C1.addEventListener ("mouseup", eventUp, false );
13. // Mobile terminal Processing
14. C1.addEventListener ('touchstart', eventDown, false );
15. C1.addEventListener ('touchend', eventUp, false );
16. C1.addEventListener ('touchmove ', eventMove, false );
17. // Initialization
18. InitCanvas ();
19. }

3. Fill the gray rectangle

Copy XML/HTML Code to clipboard

1. Function initCanvas () {// The online method is to set a background image for the canvas. Here, I put a div directly under the canvas.
2. // C1.style. backgroundImage = "url(.jpg )";
3. Ctx. globalCompositeOperation = "source-over ";
4. Ctx. fillStyle = '# aaaaaa ';
5. Ctx. fillRect (0, 0, c1.clientWidth, c1.clientHeight );
6. Ctx. fill ();
7. Ctx. font = "Bold 30px Arial ";
8. Ctx. textAlign = "center ";
9. Ctx. fillStyle = "#999999 ";
10. Ctx. fillText ("Scratch", c1.width/); // set this attribute to make a circular eraser.
11. // Some old mobile Browsers Do not support destination-out. The following code provides a solution.
12. Ctx. globalCompositeOperation = 'destination-out ';}

4. Press the mouse and start with touch

Copy XML/HTML Code to clipboard

1. Function eventDown (e ){
2. E. preventDefault ();
3. Ismousedown = true ;}

5. Move the mouse up and touch the end

Copy XML/HTML Code to clipboard

1. Function eventUp (e ){
2. E. preventDefault ();
3. // Obtain all the data of the canvas.
4. Var a = ctx. getImageData (0, 0, c1.width, c1.height );
5. Var j = 0;
6. For (var I = 3; I <a. data. length; I + = 4 ){
7. If (a. data [I] = 0) j ++;
8. }
9. // When the split area is equal to half, the processing result can be started.
10. If (j> = a. data. length/8 ){
11. IsOk = 1;
12. }
13. Ismousedown = false;
14. }

6. Move the mouse and touch

Copy XML/HTML Code to clipboard

1. // Move the mouse and touch
2. Function eventMove (e ){
3. E. preventDefault ();
4. If (ismousedown ){
5. If (e. changedTouches ){
6. Ee = e. changedTouches [e. changedTouches. length-1];
7. }
8. Var topY = document. getElementById ("top"). offsetTop;
9. Var oX = c1.offsetLeft,
10. OY = c1.offsetTop + topY;
11. Var x = (e. clientX + document. body. scrollLeft | e. pageX)-oX | 0,
12. Y = (e. clientY + document. body. scrollTop | e. pageY)-oY | 0;
13. // Draw an arc of 360 degrees, which is a circle because ctx. globalCompositeOperation = 'destination-out' is set ';
14. // The image is transparent.
15. Ctx. beginPath ();
16. Ctx. arc (x, y, fontem * 1.2, 0, Math. PI * 2, true );
17. // The following three lines of code are used to fix the fact that some mobile Browsers Do not support destination-out.
18. // I am not very clear about the principle of doing so.
19. C1.style. display = 'none ';
20. C1.offsetHeight;
21. C1.style. display = 'herit ';
22. Ctx. fill ();
23. }
24. If (isOk ){
25. Var btn = document. getElementsByClassName ("btn ");
26. For (var I = 0; I <btn. length; I ++ ){
27. Btn [I]. style. zIndex = '3 ';
28. }
29. Document. getElementsByClassName ("btn") [0]. style. zIndex = "3 ";
30. }
31. }

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.

The above is a small part of the Html5 Implementation of the mobile terminal, PC side scratch card effect, I hope to help you, if you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!