<canvas> Implémentation d'un brouillard de guerre (fog of war)
Dans le cadre d'un petit projet personnel, je voudrais mettre en place un brouillard de guerre (fog of war).
Pour réaliser ma démo, je me suis inspiré du très bon exemple suivant : http://codepen.io/zyklus/pen/prvnb
J'ai essayé d'implémenter une solution ici : http://jsfiddle.net/Foub12/shwbsa49/7/
Le principe est d'avoir un brouillard de guerre sur toute la carte (sauf 3 zones visibles dès le départ) et avec le déplacement du pointeur de la souris (je simule ainsi la présence d'unités), je souhaiterais pouvoir visualiser l'intégralité de la carte.
Dans le handler mousemove, si j'appelle à chaque fois la méthode init(), cela fonctionne bien mais cela finit très rapidement par « ramer » car redessiner beaucoup de cercles même sur un canvas mémoire prend du temps...
(cf. code ci-dessous).
Code:
1
2
3
4
5
6
7
8
9
| monCanvas.addEventListener("mousemove", function(ev){
var pX = ev.pageX, pY = ev.pageY;
visiblePoints.push(new Point(pX, pY));
// this solution is more slow, bug...
init();
// I will try to update the map in the region of mouse pointer.
// but bug... why ???
// updateCanvasByRegion(pX, pY);
}); |
Du coup, je voulais essayer de redessiner qu'une partie du canvas (autour de la position du pointeur de la souris), via la méthode updateCanvasByRegion(pX, pY); mais cela ne marche pas du tout.
Je ne vois pas bien quelle erreur j'ai pu faire dans cette méthode.
Avez-vous une idée ?
Merci beaucoup,
F.
