Mobile Touch event and H5-Canvas pixel detection to realize scratch-off

Recently I have been flooded with Alipay’s Jifu character
I still haven’t seen Jingyefuค(TㅅT) and I’m heartbroken
I’ll bring it to you today The
effect of the scratch card on the mobile terminal is like this

Swipe your hand to trigger the scratch card

When the scratch card area reaches more than 70%, all gray layers will be automatically scratched

---

Not a lot of code
That’s all the code

---

Let me explain it briefly
First of all, in the page we only We need a canvas element

In CSS we need to set the style of the canvas background image in advance

#myCanvas {    
background-repeat: no-repeat;    
background-position: center;    
background-size: 200px 200px;}

---

In the script we first need to declare the required variables

var canvas = document.getElementById('myCanvas'),
    ctx = canvas.getContext('2d'),
    w = canvas.width;
    h = canvas.height;
    area = w * h;
    l = canvas.offsetLeft;
    t = canvas.offsetTop,
    img = new Image();

Get the canvas object and its context object
area variable is prepared for the following pixel detection
img is used for image preloading

---

The most critical function is the init initialization function

var init = (function(){
    ctx.fillStyle = "#ccc";
    ctx.fillRect(0, 0, w, h);
    randomImg();            
    img.addEventListener('load', function(){
        canvas.style.backgroundImage = 'url(' + img.src +')';
        ctx.globalCompositeOperation = 'destination-out';
        bindEvent();
    });
})();

The process is as follows:

• Cover the entire canvas with the gray layer

• Random pictures

• Picture preloading

• After loading, set the picture as canvas background

• Before scratching the card, set ctx .globalCompositeOperation = 'destination-out';

• #Bind listening events for canvas, Tuca

This globalCompositeOperation is the scratch-off The key
For the usage of this attribute, you can click here

---

var randomImg = function(){
    var random = Math.random();    if(random < 0.4){
        img.src = './1.png';
    }else if(random > 0.6){
        img.src = './2.png';
    }else{
        img.src = './award.jpg';
    }
};

The function of the randomImg function is to randomize pictures
For random pictures, you need to use Math.random() random numbers

---

canvas we need to bind two functions
touchmove and touchend

var moveFunc = function(e){
    var touch = e.touches[0],
        posX = touch.clientX - l,
        posY = touch.clientY - t;
    ctx.beginPath();
    ctx.arc(posX, posY, 15, 0, Math.PI * 2, 0);
    ctx.fill();};

To draw a circle when sliding the screen
Because destination-out is set, a scratch effect occurs
Also note that every time it is triggered All mustctx.beginPath();
Otherwisectx.fill();will connect the previously drawn circles and scrape over a large area

var endFunc = function(e){
    var data = ctx.getImageData(0, 0, w, h).data,
        scrapeNum = 0;    
        for(var i = 3, len = data.length; i < len; i += 4){        
        if(data[i] === 0){
            scrapeNum++;
        }
    }    if(scrapeNum > area * 0.7){
        ctx.clearRect(0, 0, w, h);
        canvas.removeEventListener('touchmove', moveFunc, false);
        canvas.removeEventListener('touchend', endFunc, false);
    }
}

When lifted, touchend will be triggered
In this function, we used ctx.getImageData() to obtain the pixel information of the canvas
For the usage of this function, you can click here
When the gray layer is scratched, the background of the canvas is behind it
So we can judge whether the layer has been scratched by judging whether A in the pixel information RGBA is 0
scrapeNum represents the scraped pixel Click
So by scrapeNum > area * 0.7
When the scraped range is greater than 70% of the total range
Clear the entire gray layer

and above It is the content of mobile touch event and H5-Canvas pixel detection to realize scratch-off. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!