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('myCanvas'), ctx = canvas.getContext('2d'), 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 = './1.png'; }else if(random > 0.6){ img.src = './2.png'; }else{ img.src = './award.jpg'; } }; var bindEvent = function(){ canvas.addEventListener('touchmove', moveFunc, false); canvas.addEventListener('touchend', 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('touchmove', moveFunc, false); canvas.removeEventListener('touchend', endFunc, false); } } 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(); }); })(); </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('myCanvas'), ctx = canvas.getContext('2d'), 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('load', function(){ canvas.style.backgroundImage = 'url(' + img.src +')'; ctx.globalCompositeOperation = 'destination-out'; 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 = './1.png'; }else if(random > 0.6){ img.src = './2.png'; }else{ img.src = './award.jpg'; } };
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('touchmove', moveFunc, false); canvas.removeEventListener('touchend', 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) !