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.

¿ Hola que tal ?