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.
Javascript
Zuerst müssen wir das Mausauswahl- und Ziehereignis der Seite deaktivieren, das heißt, den Auswahlvorgang nicht ausführen.
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.
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.
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