Mobile Touch-Ereignisse und H5-Canvas-Pixelerkennung ermöglichen das Rubbeln-H5-Tutorial-php.cn

Mobile Touch-Ereignisse und H5-Canvas-Pixelerkennung ermöglichen das Rubbeln

黄舟

Freigeben： 2017-02-27 15:28:06

Original

2216 Leute haben es durchsucht

Kürzlich wurde ich mit Alipays Jifu-Charakter überschwemmt
Ich habe die Segnungen der Hingabe immer noch nicht gesehen (TㅅT) und es bricht mir das Herz
Heute habe ich bring es zu dir Der
Effekt der Rubbelkarte auf dem mobilen Endgerät ist wie folgt

Wischen Sie, um die Rubbelkarte auszulösen

Wenn der Rubbelkartenbereich erreicht ist Bei mehr als 70 % werden alle grauen Ebenen automatisch weggekratzt

Nicht viel Code
Das ist der ganze Code

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta content="width=device-width,maximum-scale=1.0,minimum-scale=1.0,initial-scale=1.0,user-scalable=no" name="viewport">
    <title>Scrape</title>
    <style>
        #myCanvas {            
        background-repeat: no-repeat;            
        background-position: center;            
        background-size: 200px 200px;        
        }
    </style></head><body>
    <canvas id="myCanvas" width=300 height=300></canvas>
    <script>
        var canvas = document.getElementById(&#39;myCanvas&#39;),
            ctx = canvas.getContext(&#39;2d&#39;),
            w = canvas.width;
            h = canvas.height;
            area = w * h;
            l = canvas.offsetLeft;
            t = canvas.offsetTop,
            img = new Image();        
            var randomImg = function(){
            var random = Math.random();            
            if(random < 0.4){
                img.src = &#39;./1.png&#39;;
            }else if(random > 0.6){
                img.src = &#39;./2.png&#39;;
            }else{
                img.src = &#39;./award.jpg&#39;;
            }
        };        var bindEvent = function(){
            canvas.addEventListener(&#39;touchmove&#39;, moveFunc, false);
            canvas.addEventListener(&#39;touchend&#39;, endFunc, false);
        };        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();
        };        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(&#39;touchmove&#39;, moveFunc, false);
                canvas.removeEventListener(&#39;touchend&#39;, endFunc, false);
            }
        }        var init = (function(){
            ctx.fillStyle = "#ccc";
            ctx.fillRect(0, 0, w, h);
            randomImg();            
            img.addEventListener(&#39;load&#39;, function(){
                canvas.style.backgroundImage = &#39;url(&#39; + img.src +&#39;)&#39;;
                ctx.globalCompositeOperation = &#39;destination-out&#39;;
                bindEvent();
            });
        })();    </script></body></html>

Nach dem Login kopieren

Ich werde es unten kurz erklären
Zunächst auf der Seite Wir benötigen nur ein Canvas-Element

<canvas id="myCanvas" width=300 height=300></canvas>

Nach dem Login kopieren

In CSS müssen wir den Stil des Canvas-Hintergrundbilds im Voraus festlegen

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

Nach dem Login kopieren

Im Skript müssen wir zunächst die erforderlichen Variablen deklarieren

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

Nach dem Login kopieren

Das Canvas-Objekt und sein Kontextobjekt abrufen
Bereichsvariable wird für die folgende Pixelerkennung vorbereitet
img wird zum Vorladen von Bildern verwendet

Die kritischste Funktion ist die Init-Initialisierungsfunktion

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

Nach dem Login kopieren

Der Prozess ist wie folgt:

Bedecken Sie die gesamte Leinwand mit der grauen Schicht
Zufällige Bilder
Bild vorladen
Legen Sie nach dem Laden das Bild als Leinwandhintergrund fest
Bevor Sie die Karte freirubbeln, legen Sie ctx.globalCompositeOperation = 'destination-out';
fest, an das das Hörereignis gebunden werden soll die Leinwand und wenden Sie die Karte an

Diese globaleCompositeOperation ist der Schlüssel zum Rubbelspiel
Informationen zur Verwendung dieses Attributs finden Sie hier

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

Nach dem Login kopieren

Die Funktion der Funktion randomImg besteht darin, Bilder zufällig zu sortieren
Um Bilder zufällig zu sortieren, müssen Sie Math.random() Zufallszahlen verwenden

Canvas müssen wir zwei Funktionen binden
touchmove und 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();};

Nach dem Login kopieren

Zum Zeichnen eines Kreises beim Verschieben des Bildschirms
Da destination-out eingestellt ist, erzeugt es einen Kratzeffekt
Beachten Sie außerdem, dass jeder Auslöser ctx.beginPath(); <🎜 sein muss >Andernfalls
werden die zuvor gezeichneten Kreise verbunden und über eine große Fläche gekratzt ctx.fill();

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(&#39;touchmove&#39;, moveFunc, false);
        canvas.removeEventListener(&#39;touchend&#39;, endFunc, false);
    }
}

Nach dem Login kopieren

Wenn die Hand angehoben wird, wird Touchend ausgelöst

In dieser Funktion verwenden wir
Erhalten die Pixelinformationen der Leinwandctx.getImageData()Um diese Funktion zu nutzen, können Sie hier klicken
Wenn die graue Ebene zerkratzt ist, liegt der Hintergrund der Leinwand dahinter
So können wir das A im RGBA des Pixelinformationen Ob es 0 ist, bestimmt, ob die Ebene gekratzt wurde
scrapeNum stellt die Pixel dar, die gekratzt wurden
Es wird also beurteilt,
scrapeNum > area * 0.7Wenn der gekratzte Bereich größer als 70 % der Gesamtmenge ist Bereich
Löschen Sie die gesamte graue Ebene

Das Obige ist der Inhalt des mobilen Touch-Ereignisses und der H5-Canvas-Pixelerkennung, um ein Rubbeln zu erreichen. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (m.sbmmt.com)!