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

黄舟
Libérer: 2017-02-27 15:28:06
original
2241 Les gens l'ont consulté


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>
Copier après la connexion

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>
Copier après la connexion

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;}
Copier après la connexion

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();
Copier après la connexion

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();
    });
})();
Copier après la connexion

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 = &#39;destination-out&#39;;

  • 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;;
    }
};
Copier après la connexion

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();};
Copier après la connexion

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);
    }
}
Copier après la connexion

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) !


Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal