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