Heim >Web-Frontend >H5-Tutorial >Mobile Touch-Ereignisse und H5-Canvas-Pixelerkennung ermöglichen das Rubbeln

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

黄舟Original: 2017-02-27 15:28:062273Durchsuche

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>

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>

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;}

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();

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();
    });
})();

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;;
    }
};

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();};

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(); 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);
    }
}

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 (www.php.cn)!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：HTML5-Client-DatenspeicherWeb Storage – localStorage und sessionStorageNächster Artikel：HTML5-Client-DatenspeicherWeb Storage – localStorage und sessionStorage

In Verbindung stehende Artikel

Mehr sehen