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.
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.
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>
.grat{ position:relative; width:176px; height:246px; } .grat canvas{ top:0; left:0; position: absolute; z-index: 2; }
$(function(){ $('.grat').each(function(){ var md = 0; var container = $(this); var containerid = $(this).attr('id'); var canvas = document.getElementById($('canvas', container).attr('id')); var context = canvas.getContext('2d'); var imageObj = new Image(); var imagehide = new Image(); var imageData; var imw = canvas.width; var imh = canvas.height; var numpix = imw*imh; var red; var green; var blue; var alpha; var multi = 20; var rx; var ry; var x; var y; var counterpix = 0; var percent = 70; var data; imageObj.src = $('img', container).attr('src'); imagehide.src = $('img', container).data('hidden'); // quand la première image est chargée, la mettre dans le canvas, et charger l'image cachée. imageObj.onload = function() { context.drawImage(imageObj, 0, 0); imagehide.onload = function(){ $('img', container).attr('src', imagehide.src); }; }; // quand la souris se déplace au dessus de l'image et que le bouton est enfoncé (md=1) canvas.addEventListener('mousemove', function(evt) { var mousePos = getMousePos(canvas, evt); if( md ){ imageData = context.getImageData(0, 0, imw, imh); data = imageData.data; // on prend 100 points autour de la souris dans un rayon de multi = 20 for( var i=0; i < 100; i++ ){ rx = Math.random() * multi; ry = Math.random() * multi; x = mousePos.x + (multi - (rx*2)); y = mousePos.y + (multi - (ry*2)); if( imageData.data[((imw * parseInt(y)) + parseInt(x)) * 4 + 3] != 0 ){ imageData.data[((imw * parseInt(y)) + parseInt(x)) * 4 + 3] *= 0; counterpix++; } } // Quand le nombre de pixels découverts est supérieur à percent, afficher la réponse. if( counterpix*100/numpix >= percent ){ if( $('#soluce_' + containerid).length == 0 ) container.after('<h4 id="soluce_' + containerid + '">' + $('img', container).data('soluce') + '</h4>'); } context.putImageData(imageData,0,0); } }, false); document.addEventListener('mousedown', function(evt) { md = 1; }, false); document.addEventListener('mouseup', function(evt) { md = 0; }, false); }); }); function getMousePos(canvas, evt) { var rect = canvas.getBoundingClientRect(); return { x: evt.clientX - rect.left, y: evt.clientY - rect.top }; }
Les images utilisées ont été trouvées au hasard de recherches.
Voici des liens vers leurs créateurs ou distributeurs.