CodiFolio

Html5 Canvas à gratter.

Objectif

Il s'agit de cacher un contenu avec une image.
En maintenant le bouton de la souris appuyé et en passant le curseur au dessus de l'image, la partie masquée devra apparaître petit à petit.

Comment ?

La difficulté réside dans le fait que le masque que l'on va "gratter" est une image, et non un applat de couleurs.

L'étiquette <canvas> permet de réaliser cette prouesse en html.

Le masque à gratter sera donc une balise <canvas> contenant les pixels d'une image placée au dessus d'un contenu quelconque. Il faudra veiller à ce que le contenu à masquer ne soit visible qu'après grattage.

Lorsque qu'un certain pourcentage de l'image est découvert, déclencher un évènement, dans l'exemple ci-dessous, le nom du personnage apparaît lorsque 70% de l'image sont visibles.

Exemple:

Qui se cache derrière le masque de Spiderman ?

spiderman

Qui se cache derrière le masque de Iron-Man ?

iron-man

Gratter pour découvrir les solutions.

Le code

Le javascript contemple tous les conteneurs ayant la class ".grat", ces conteneurs contiennent un canvas et une image.

L'image qui se charge est celle qui servira de masque. L'url de l'image à découvrir est passée vie l'attribut "data-hidden", l'attribut "data-soluce" passe quand à lui l'information à afficher à la fin du grattage. Le canvas est en position absolute et se place donc au dessus du contenu.

<h4>Qui se cache derrière le masque de Spiderman ?</h4>
<div id="grat1" class="grat">
	<img src="http://notes.ariel-ad.com/statics/notes/img/spiderman.jpg" data-hidden="http://notes.ariel-ad.com/statics/notes/img/pparker.jpg" alt="spiderman" data-soluce="Peter Parker"/>
	<canvas id="tograt1" width="176" height="246"></canvas>
</div>		

Améliorations envisageables:

  • Changer le curseur au survol de la zone grattable, pour une pièce par exemple.
  • Améliorer le camouflage des réponses.
  • Un fallback pour les navigateurs ne supportant pas canvas.
  • ...

Informations

Les images utilisées ont été trouvées au hasard de recherches.

Voici des liens vers leurs créateurs ou distributeurs.

Retour à l'index.

Commentaires.

Cet article vous a plu ou pas, vous êtes un robot...
Dites-le via le formulaire ci-dessous:

Commentaires déjà postés sur ce sujet:

  • le 25/02/2015 à 15h40 LoïcBcn
    Bonjour stefde3 et merci pour ton commentaire. J'ai ajouté des événements "touch" au javascript afin de prendre en compte les mobiles, ça fonctionne sur mon téléphone qui est un vieil Androïd avec le navigateur par défaut, et ça marche aussi sur la console mobile de chrome, j'espère que tu testeras à nouveau. Concernant le fallback, je ne pense pas en faire un tutorial, d'ailleurs, ces pages sont plus des pense-bêtes qu'autre chose. Pour détecter si cela doit fonctionner ou non dans un navigateur, tu peux utiliser Modernizer ou tester en js la prise en charge de telle ou telle fonctionnalité. Ensuite, que mettre à la place de ce "canvas à gratter" ? Du flash ou un message ou juste un événement click qui dévoilera la solution.
  • le 24/02/2015 à 20h38 stefde3
    Bonjour, ce code ne fonctionne pas sur Android avec Chrome. Tu as parler de fallback mais pourrais-tu nous faire un tuto à la suite de celui-ci stp ? Cordialement.