Verwenden Sie HTML5-Canvas, um Rubbelkarteneffekt-Javascript-Kenntnisse zu erlangen

Lassen Sie mich Ihnen zuerst die Wirkung zeigen:

Demo ansehen Quellcode herunterladen

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.

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.

<canvas></canvas> 

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, erhalten das Canvas-Element und legen die Hintergrund- und Positionsattribute fest. 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'; 
canvas.style.position = 'absolute'; 
var imgs = ['p_0.jpg','p_1.jpg']; 
var num = Math.floor(Math.random()*2); 
img.src = imgs[num]; 

Wenn festgestellt wird, dass das Bild geladen ist, werden zunächst einige Eigenschaften und Funktionen definiert. Die Funktion „eventDown()“ definiert das Press-Ereignis und „eventUp()“. Definiert das Release-Ereignis. Event, eventMove() definiert das Bewegungsereignis, bei dem beim Drücken die Koordinatenverschiebung ermittelt und ein kleiner Punkt durch arc(x, y, 10, 0, Math.PI * 2) gezeichnet wird.

img.addEventListener('load', function(e) { 
 var ctx; 
 var w = img.width, 
  h = img.height; 
 var offsetX = canvas.offsetLeft, 
  offsetY = canvas.offsetTop; 
 var mousedown = false; 
 function layer(ctx) { 
  ctx.fillStyle = 'gray'; 
  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; 
    with(ctx) { 
     beginPath() 
     arc(x, y, 10, 0, Math.PI * 2);//绘制圆点 
     fill(); 
    } 
  } 
 } 
 //... 
}); 

Rufen Sie abschließend die oben genannten Funktionen über Canvas auf, zeichnen Sie Grafiken, achten Sie auf Berührungs- und Mausereignisse und rufen Sie die entsprechenden Funktionen auf:

img.addEventListener('load', function(e) { 
 //..接上段代码 
 canvas.width=w; 
 canvas.height=h; 
 canvas.style.backgroundImage='url('+img.src+')'; 
 ctx=canvas.getContext('2d'); 
 ctx.fillStyle='transparent'; 
 ctx.fillRect(0, 0, w, h);//绘制矩形 
 layer(ctx); 
 ctx.globalCompositeOperation = 'destination-out'; 
 canvas.addEventListener('touchstart', eventDown); 
 canvas.addEventListener('touchend', eventUp); 
 canvas.addEventListener('touchmove', eventMove); 
 canvas.addEventListener('mousedown', eventDown); 
 canvas.addEventListener('mouseup', eventUp); 
 canvas.addEventListener('mousemove', eventMove); 

Der obige Inhalt dient nur als Referenz. Sie können die tatsächliche Situation mit dem Hintergrundprogramm und der Datenbank kombinieren, um ein echtes Rubbellos durchzuführen. Der obige Inhalt wurde mit HTML5 Canvas geschrieben, um den Rubbelkarteneffekt zu erzielen. Ich hoffe, er gefällt Ihnen.