Implémentation d'une carte à gratter dans le mini programme WeChat

Comment obtenir l'effet de carte à gratter ?

L'idée est la suivante :

1. Déterminez d'abord la position et la taille de l'image ou du texte gagnant

2. Commencez à dessiner la toile et faites correspondre la position et la taille. la copie gagnante précédente. L'emplacement reste cohérent.

3. Couvrez la toile avec un masque gris pour créer l'effet de la carte à gratter avant de gratter

Le code spécifique est le suivant

let left=0;
this.data.awardCanvas.moveTo(left,0)
this.data.awardCanvas.lineTo(left+400,0);
this.data.awardCanvas.lineTo(left+400,150);
this.data.awardCanvas.lineTo(left,150);
this.data.awardCanvas.stroke()
this.data.awardCanvas.setFillStyle('#ddd')
this.data.awardCanvas.fill()
this.data.awardCanvas.draw()

Début. Pour effectuer une action de carte à gratter, définissez deux actions déclenchées, bindtouchstart et bindtouchmove, dans le canevas

bindtouchstart est la première position où le doigt commence à tomber, et bindtouchmove est la position où le doigt bouge

L'un des attributs importants du canevas est clearRect, efface le contenu sur le canevas

clearRect (efface la coordonnée X de la position, efface la coordonnée Y de la position, efface la largeur, efface le hauteur)

Le code spécifique est le suivant :

this.data.awardCanvas.clearRect(x,y,15,15);
this.data.awardCanvas.draw(true)

Le code spécifique est dans https://github.com/zhaodengping/scratch-mini

Allez l'essayer, peut-être pourrez-vous gagner le premier prix~~

Tutoriel recommandé : "WeChat Mini Program"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!