Utiliser un canevas HTML5 pour acquérir des compétences effet de carte à gratter_javascript

Laissez-moi d'abord vous montrer l'effet :

Voir la démo Téléchargement du code source

Avez-vous déjà joué aux cartes à gratter ? Le genre où vous pouvez gagner un prix par accident. Aujourd'hui, je vais partager avec vous un effet de carte à gratter basé sur la technologie HTML5. Sur PC, il vous suffit de maintenir la souris enfoncée. Sur les téléphones mobiles, il vous suffit de maintenir votre doigt enfoncé et de gratter doucement le calque pour simuler le véritable scratch. effet.

Nous utilisons le HTML5 Canvas, combiné à l'API qu'il fournit, pour dessiner un calque de masque gris sur l'élément Canvas, puis dessinons un graphique transparent en détectant les mouvements et les gestes de la souris de l'utilisateur, afin que vous puissiez voir l'arrière-plan du Canvas. De vraies images peuvent obtenir l'effet de carte à gratter.

HTML

Il suffit d'ajouter l'élément de balise canvas à la page, et le reste dépend de JavaScript. Notez que l'élément canvas est un élément unique à HTML5 et s'exécute sur les navigateurs modernes prenant en charge HTML5.

<canvas></canvas> 

Javascript

Tout d'abord, nous devons désactiver l'événement de sélection et de glissement de la souris sur la page, c'est-à-dire ne pas exécuter l'opération de sélection.

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

Ensuite, nous définissons la classe d'image, obtenons l'élément canvas et définissons les attributs d'arrière-plan et de position. Nous utilisons deux photos aléatoires dans cet exemple et actualisons à chaque fois une photo aléatoire comme arrière-plan.

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]; 

Entrez ensuite le corps principal. Lorsqu'il est détecté que l'image est chargée, définissez d'abord certaines propriétés et fonctions. La fonction layer() est utilisée pour dessiner un carré gris eventDown() définit l'événement de presse et eventUp(). définit l'événement de libération. Event, eventMove() définit l'événement de mouvement dans lequel, lorsqu'on appuie dessus, le déplacement des coordonnées est obtenu et un petit point est dessiné à travers l'arc (x, y, 10, 0, Math.PI * 2).

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(); 
    } 
  } 
 } 
 //... 
}); 

Enfin, appelez les fonctions ci-dessus via Canvas, dessinez des graphiques, écoutez les événements tactiles et de la souris et appelez les fonctions correspondantes. Veuillez consulter le code :
.

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); 

Le contenu ci-dessus est uniquement à titre de référence. Vous pouvez combiner la situation réelle avec le programme d'arrière-plan et la base de données pour réaliser un véritable grattage. Le contenu ci-dessus est ce que j'ai écrit en utilisant HTML5 Canvas pour obtenir l'effet de carte à gratter. J'espère qu'il vous plaira.