Maison >interface Web >Tutoriel H5 >Événement Mobile Touch et détection de pixels H5-Canvas pour réaliser un grattage

Événement Mobile Touch et détection de pixels H5-Canvas pour réaliser un grattage

黄舟original: 2017-02-27 15:28:062273parcourir

Récemment, j'ai été inondé du personnage jifu d'Alipay
Je n'ai toujours pas vu les bénédictions du dévouement (TㅅT) et j'ai le cœur brisé
Aujourd'hui, je apportez-le à vous L'effet
de la carte à gratter sur le terminal mobile est comme ceci

Faites glisser pour déclencher la carte à gratter

Lorsque la zone de la carte à gratter atteint plus de 70 %, toutes les couches grises seront automatiquement rayées

Pas beaucoup de code
C'est tout le 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>

Je vais l'expliquer brièvement ci-dessous
Tout d'abord, sur la page Nous n'avons besoin que d'un élément de canevas

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

En CSS, nous devons définir à l'avance le style de l'image d'arrière-plan du canevas

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

Dans le script, nous devons d'abord déclarer les variables requises

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

Obtenir l'objet canevas et son objet contextuel
la variable de zone est préparée pour la détection de pixels suivante
img est utilisé pour le préchargement de l'image

La fonction la plus critique est la fonction d'initialisation init

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

Le processus est le suivant :

Couvrir toute la toile avec la couche grise
Images aléatoires
Préchargement des images
Après le chargement, définissez l'image comme arrière-plan de la toile
Avant de gratter la carte, définissez ctx.globalCompositeOperation = 'destination-out';
pour lier l'événement d'écoute à la toile, et appliquez la carte

Cette globalCompositeOperation est la clé du jeu de grattage
Pour plus d'informations sur l'utilisation de cet attribut, vous pouvez cliquer ici

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

La fonction de randomImg est de randomiser les images
Pour randomiser les images, vous devez utiliser des nombres aléatoires Math.random()

Canvas, nous devons lier deux fonctions
touchmove et 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();};

Pour dessiner un cercle lors du glissement de l'écran
Parce que destination-out est défini, il produit un effet scratch
Notez également que chaque déclencheur doit êtrectx.beginPath();
Sinon ctx.fill(); reliera les cercles précédemment dessinés et grattera sur une grande surface

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

Lorsque la main est levée, le touchend sera déclenché
Dans cette fonction, on utilise ctx.getImageData()Obtenu le informations en pixels du canevas
Pour utiliser cette fonction, vous pouvez cliquer ici
Lorsque le calque gris est rayé, le fond du canevas est derrière
On peut donc juger le A dans le RGBA du informations sur les pixels Qu'il soit 0 détermine si le calque a été rayé
scrapeNum représente les pixels qui ont été grattés
Il est donc jugé par scrapeNum > area * 0.7
Lorsque la plage grattée est supérieure à 70% du total range
Effacer toute la couche grise

Ce qui précède est le contenu de l'événement Touch mobile et de la détection de pixels H5-Canvas pour réaliser le grattage. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois. (www.php.cn) !

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Stockage des données client HTML5Stockage Web : localStorage et sessionStorageArticle suivant：Stockage des données client HTML5Stockage Web : localStorage et sessionStorage

Articles Liés

Voir plus