Implementierung einer Rubbelkarte im WeChat-Miniprogramm

Wie erzielt man den Effekt einer Rubbelkarte?

Die Idee ist:

Bestimmen Sie zunächst die Position und Größe des Gewinnerbildes oder -textes

2. Beginnen Sie mit dem Zeichnen der Leinwand und passen Sie Position und Größe an Das bisherige Siegerexemplar bleibt erhalten.

3. Decken Sie die Leinwand vor dem Rubbeln mit einer grauen Maske ab, um den Effekt der Rubbelkarte zu erzeugen

Der spezifische Code lautet wie folgt

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

Start Um eine Rubbelkartenaktion durchzuführen, definieren Sie zwei ausgelöste Aktionen, bindtouchstart und bindtouchmove, im Canvas

bindtouchstart ist die erste Position, an der der Finger zu fallen beginnt, und bindtouchmove ist die Position, an der sich der Finger bewegt

Eines der wichtigen Canvas-Attribute ist clearRect, löscht den Inhalt auf der Leinwand

clearRect (löscht die X-Koordinate der Position, löscht die Y-Koordinate der Position, löscht die Breite, löscht die Höhe)

Der spezifische Code lautet wie folgt:

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

Der spezifische Code befindet sich in https://github.com/zhaodengping/scratch-mini

Probieren Sie es aus, vielleicht können Sie den ersten Preis gewinnen~~

Empfohlenes Tutorial: „WeChat Mini-Programm“

Das obige ist der detaillierte Inhalt vonImplementierung einer Rubbelkarte im WeChat-Miniprogramm. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!