Tags de toile HTML5 pour obtenir l'effet de la carte à gratter

Avez-vous joué à une carte à gratter? Le genre qui peut gagner par accident. Aujourd'hui, je partagerai avec vous un effet de carte à gratter basé sur la technologie HTML5. Tenez simplement la souris sur le PC, et sur le téléphone, il vous suffit de maintenir le doigt et de gratter doucement le calque pour simuler l'effet de grattage réel.

Nous utilisons la toile en toile de HTML5, combinée avec l'API qu'il fournit, pour dessiner un masque gris sur l'élément de toile, puis dessiner une figure transparente en détectant le mouvement et les gestes de la souris de l'utilisateur. De cette façon, vous pouvez voir l'image réelle sous l'arrière-plan du canevas et réaliser l'effet de la carte à gratter.

Nous devons seulement 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 qui n'existe que dans HTML5 et fonctionne sur des navigateurs modernes qui prennent en charge HTML5.