« Programmation objet et géométrie/La balise canvas » : différence entre les versions

Contenu supprimé Contenu ajouté
Aucun résumé des modifications
Ligne 78 :
==Effaçage de la figure==
 
AttentionIl auxexiste tachesdeux moyen de peinture,créer il n'y a pas deune gomme dansavec ''canvas'' ! AlorsLe le seul moyen d'effacer des dessinspremier est de cacher les cacherdessins par une tache de peinture de couleur blanche (technique du [[w:palimpseste|palimpseste]]). Pour effacer toute la figure (par exemple pour des animations), on fait en deux étapes:
 
===Tremper le pinceau dans la peinture blanche===
Ligne 96 :
pinceau.fillRect(0,0,400,200);
</source>
 
===Une vraie gomme===
Mais si l'on veut créer une vraie gomme, qui efface et ne laisse aucune trace, il existe une solution :
<source lang="javascript">
pinceau.globalCompositeOperation = "destination-out";
pinceau.strokeStyle = "rgba(0,0,0,1.0)";
</source>
Le pinceau va donc effacer les parties tracés auparavant, sans laisser de couleur transparaître. Bien pratique lorsque l'on désire faire un canvas transparent avec une image derrière par exemple !
Pour plus d'information sur la propriété globalCompositeOperation et toutes ses possibilités, je vous renvoie à cette [https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html page].
 
==Coup de pinceau==