Use HTML5 to implement scratch effect, and html5 to implement scratch

Use HTML5 to implement scratch effect, and html5 to implement scratch

Address: http://www.phpthinking.com/archives/525

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.

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.

Click to download source code

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.

 <canvas></canvas> 

Javascript

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

 var bodyStyle = document.body.style; bodyStyle.mozUserSelect = '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.

 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.

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

Img. addEventListener ('load', function (e ){//.. connect to 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 rectangular layer (ctx); ctx. globalCompositeOperation = 'destination-out'; canvas. addEventListener ('touchstart', eventDown); canvas. addEventListener ('touchend', eventUp); canvas. addEventListener ('touchmove ', eventMove); canvas. addEventListener ('mouseunder', 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.

We urgently need to provide a mobile phone with a scratch card js html5 effect. Please!

Is that true? This is the function module of microservices.
The source code is in pan.baidu.com/s/1haK94.

Hope to adopt.



How to Implement the sliding effect of mobile phones using html5

The common banner or information list can be slide up, down, and left with IScroll.
We recommend that you use jquery mobile to implement the following event and perform changepage.

Swipe: horizontal drag greater than 30PX in one second, while vertical drag is small? Triggered when a 0px event occurs.
Swipeleft (left): triggered when the stroke event is in the left direction.
Swiperight: triggered when the stroke event is in the right direction.