Use HTML5 for Scratch Effect

Source: Internet
Author: User
Tags transparent image

Use HTML5 for Scratch Effect

 

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.

 
   
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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.