H5 realize the animation effect of a scratch card

Preface

It's time to be more polite every day , There is a sentence how to say , As long as you keep learning every day , The final victory must belong to  ——  People who play well in the examination room ~  Ha ha ha , In this way , As long as I insist on being more civilized every day , The final prize must belong to  ——  Lucky people in the lottery .

Of course! , The more important thing is to force yourself to do something , What is the most difficult thing now ？ The hardest thing is not to insist ？ Want a good figure , But I can't keep fit ; Want a high paying job , But don't insist on learning ; Most people's life is probably in “  to want to ... Don't insist on ...”  In the struggle to spend it ~

ah , I chatted so much carelessly , Now let's start today's theme of scraping card special effects ！

demand

There was a need , It's a request h5 Web pages achieve the effect of a scratch card , And scrape to a certain extent , The base map will be fully displayed . I was thinking of using canvas Make , But in the process of doing it, I found myself canvas The level is really not good , So I thought about looking for wheels made by others to use , Finally found  

wScratchPad.js

, The effect achieved is excellent ~

Let's take a look at the implementation process ~

Implementation process

wScratchPad.js

It depends on JQ Library written by , So we need to introduce JQ, To introduce

wScratchPad.js

,

wScratchPad.js

  The main properties of are configured as follows ：

size:50, //  The size of the brush

bg:'./img/ The first prize .jpg', //  Background image （ The bottom picture ）, It can be color （ The color must be hexadecimal ）

fg:'./img/ Pure gray picture .jpg', //  Foreground image （ The outermost picture , What is scraped off is this layer ）, It can be color （ The color must be hexadecimal ）

realtime:true, //  Calculate the percentage of actual time , When set to false when , The percentage is calculated only in scratchUp Calculate when lifting , This method can be used to improve performance .

scratchDown:null, //  brush （ mouse ） Click to execute the function

scratchUp:null, //  brush （ mouse ） Click and release to execute the function

scratchMove:null, //  brush （ mouse ） Click and move to execute the function

cursor:'crosshair', //  brush （ cursor ） The style of

The main methods are as follows ：

$('#elem').wScratchPad('reset') //  Reset the scratch Carmen effect

$('#elem').wScratchPad('clear') //  Clear the scratch carmond layer

$('#elem').wScratchPad('enabled', true) // Enable disable current dom Scratch card effect

It's over

wScratchPad.js

To configure , Write according to the configuration demo It's easy , My code is as follows ：

 <script src=&quot;https://cdn.bootcdn.net/ajax/libs/jquery/3.2.0/jquery.min.js&quot;></script>
 <script type=&quot;text/javascript&quot; src=&quot;./wScratchPad.js&quot;></script>


 <style>
 #box{
 width: 600px;
 height: 600px;
 }
 </style>

 <div id=&quot;box&quot;></div>
 <script>
 $('#box').wScratchPad({
 size: 50,
 bg: './food.png',
 fg: '#ccc',
 realtime: true,
 scratchDown: null,
 scratchUp: function(e, percent){
 percent > 50? $('#box').wScratchPad('clear') : '' //  When the scraped area is greater than 50% , Show all the base maps
 }, 
 scratchMove: null,
 cursor: 'crosshair', 
 });
 function clear(){
 
 }
 </script>


The scraped area above is more than 50% , Just put the judgment shown in the bottom map into

scratchUp

brush （ mouse ） Click and release to execute the function , Because if you put

scratchMove

brush （ mouse ） Click and move to execute the function , Will have a

performance

Bad questions , stay PC It may seem nothing , But on mobile phones, especially low-end models , The difference is still obvious .

Run it , The effect is as follows ：

It can't be more perfect ！

wScratchPad.js Official address

wScratchPad.js

The official address is as follows , There are official documents to refer to , It's still very convenient to write ~

https://github.com/websanova/wScratchPad

Postscript

I hope the content shared by big ice today can help you , Through the above code, you can achieve the special effect of scraping the card , There are many applications in actual scenarios , For example, lottery , Game interaction 、 Landing page of small eggs, and so on , Belong to a fun 、 Cool and interesting ~

Today is the 23rd day that I insist on daily watch , Today, I worked overtime , After returning home, I still insisted on this article , It may only take three to five minutes to read , It will take more than an hour to write it out ~

Output a little every day , Make a little progress . aspirants , A way . Come on, everyone ~

If this article helps you , Stop collecting quietly ！ Point a praise , Pay attention to the big ice , Read more interesting technology blogs ~