HTML5 -Canvas -Tags, um einen Kratzkarteneffekt zu erzielen

Hast du Scratch Card gespielt? Die Art, die zufällig gewinnen kann. Heute werde ich Ihnen einen Scratch -Karten -Effekt basieren, der auf der HTML5 -Technologie basiert. Halten Sie einfach die Maus auf dem PC, und am Telefon müssen Sie nur den Finger halten und die Ebene vorsichtig kratzen, um den realen Kratzeffekt zu simulieren.

Wir verwenden die Canvas -Leinwand von HTML5, kombiniert mit der API, die es bietet, um eine graue Maske auf das Leinwandelement zu zeichnen, und dann eine transparente Figur zu zeichnen, indem die Mausbewegung und Gesten des Benutzers erfasst. Auf diese Weise können Sie das eigentliche Bild unter dem Hintergrund von Canvas sehen und den Kratzkarteneffekt erzielen.

Wir müssen das Canvas -Tag -Element nur zur Seite hinzufügen, und der Rest hängt von JavaScript ab. Beachten Sie, dass das Canvas -Element ein Element ist, das nur in HTML5 existiert und auf modernen Browsern läuft, die HTML5 unterstützen.