HTML5-Canvas-Tag implementiert Rubbelkarteneffekt_html5-Tutorial-Fähigkeiten

Haben Sie schon einmal Rubbellose gespielt? Die Art, bei der man zufällig einen Preis gewinnen kann. Heute werde ich Ihnen einen Rubbelkarteneffekt zeigen, der auf der HTML5-Technologie basiert. Auf dem PC müssen Sie nur die Maus gedrückt halten. Auf Mobiltelefonen müssen Sie nur Ihren Finger gedrückt halten und die Ebene vorsichtig abkratzen Wirkung.

Quellcode-Download: Zum Herunterladen klicken

Wir verwenden den HTML5-Canvas in Kombination mit der von ihm bereitgestellten API, um eine graue Maskenebene auf dem Canvas-Element zu zeichnen und dann eine transparente Grafik zu zeichnen, indem wir die Mausbewegungen und Gesten des Benutzers erkennen, sodass Sie den Canvas-Hintergrund sehen können Echte Bilder können den Rubbelkarteneffekt erzielen.

HTML

Wir müssen der Seite nur das Canvas-Tag-Element hinzufügen, der Rest hängt von JavaScript ab. Beachten Sie, dass das Canvas-Element ein einzigartiges Element für HTML5 ist und in modernen Browsern ausgeführt wird, die HTML5 unterstützen.

Code kopieren

Der Code lautet wie folgt:

< /canvas>

Javascript

Zuerst müssen wir das Mausauswahl- und Ziehereignis der Seite deaktivieren, das heißt, den Auswahlvorgang nicht ausführen.

Code kopieren

Der Code lautet wie folgt:

var bodyStyle = document.body .style;
bodyStyle.mozUserSelect = 'none';
bodyStyle.webkitUserSelect = 'none';

Dann definieren wir die Bildklasse, holen uns das Canvas-Element und legen den Hintergrund fest und Positionsattribute. In diesem Beispiel verwenden wir zwei zufällige Fotos und aktualisieren jedes Mal ein zufälliges Foto als Hintergrund.

Code kopieren

Der Code lautet wie folgt:

var img = new Image( );
var canvas = document.querySelector('canvas');
canvas.style.backgroundColor='transparent'
var imgs = 'p_0.jpg','p_1.jpg'];
var num = Math.floor(Math.random()*2);


Wenn erkannt wird, dass das Bild geladen ist, definieren Sie zunächst einige Eigenschaften und Funktionen. Die Funktion „eventDown()“ definiert das Ereignis „press“. definiert das Release-Ereignis. eventMove() definiert das Bewegungsereignis, bei dem beim Drücken die Koordinatenverschiebung ermittelt und der kleine Punkt durch arc(x, y, 10, 0, Math.PI * 2) gezeichnet wird.

Code kopierenDer Code lautet wie folgt:

img.addEventListener('load ', Funktion (e) {

var ctx;
var w = img.width,
h = img.height;
var offsetX = canvas.offsetLeft,
offsetY = canvas.offsetTop ;
var mousedown = false;

function layer(ctx) {
ctx.fillRect(0, 0, w, h); > }

function eventDown(e){
e.preventDefault();
mousedown=true;
}

function eventUp(e){
e .preventDefault( );
mousedown=false;
}

function eventMove(e){
e.preventDefault();
if(mousedown) {
if( e.changedTouches ){
e=e.changedTouches[e.changedTouches.length-1];
}
var x = (e.clientX document.body.scrollLeft || e.pageX) - offsetX ||. 0 ,
y = (e.clientY document.body.scrollTop || e.pageY) - offsetY ||. 0;
beginPath()
arc(x , y, 10, 0, Math.PI * 2);//Zeichne den Punkt
fill();
}
}
}

//...
} );


Zum Schluss rufen Sie die oben genannten Funktionen über die Leinwand auf, zeichnen Sie Grafiken, achten Sie auf Berührungs- und Mausereignisse und rufen Sie die entsprechenden Funktionen auf:

Code kopieren

Der Code lautet wie folgt:

img.addEventListener('load', function(e) {
//..Suite du code précédent
canvas.width=w;
canvas.height=h;
canvas.style.backgroundImage='url(' img.src ')';
ctx=canvas.getContext('2d');
ctx.fillStyle='transparent'; (0 , 0, w, h);//Dessinez un rectangle
layer(ctx);

ctx.globalCompositeOperation = 'destination-out';

canvas.addEventListener(' touchstart', eventDown);
canvas.addEventListener('touchend', eventUp);
canvas.addEventListener('touchmove', eventMove); > canvas. addEventListener('mouseup', eventUp);
canvas.addEventListener('mousemove', eventMove);


Vous pouvez télécharger le code complet dans la DÉMO et le combiner. avec le background selon les besoins réels Programme et base de données pour compléter un vrai programme de cartes à gratter
.