Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Nous allons aborder dans ce chapitre des fonctionnalités avancées de la librairie canvas : les masques et les compositions.
Une image découpée par une ellipse ou un trou de serrure c'est joli et c'est réalisable grâce à l'outil masque (ou "clip").
Une masque dissimule une partie de la zone d'affichage : l'extérieur du chemin tout en laissant transparent l'intérieur du chemin.
On réalise un masque en appliquant la méthode clip().
Ci-dessous une image sexy rognée par une ellipse.
Actualisez la page si l'image n'apparait pas.
Le code HTML :
Pourquoi l'insertion de l'image avec un width de 1% ?
Ainsi l'image à inscrire dans le masque fait déjà partie du DOM. Je n'ai pas besoin de la charger.
Le script :
Nouveauté du script : contexte.clip().
La zone extérieure à l'ellipse est opaque alors que l'intérieur de l'ellipse est transparent pour faire apparaitre l'image dans cette zone.
Ci-dessous document HTML dans un Iframe :
Cette fois le masque est la juxtaposition de deux cercles.
L'image qui doit être découpée ne fait pas encore partie du DOM. Il faudra donc la charger via le script !
Comme le chemin est la juxtaposition de deux formes il faut surtout utiliser beginPath() & closePath() dans la définition de celui-ci. .
Vous devez être capable de compléter le script.
Si vous ne savez plus charger une image en JS ou insérer une image dans un canevas : Insertion d'une image dans un canevas
Quand deux formes se superposent partiellement il peut être intéressant de modifier l'apparence par défaut (dernier forme dessinée au dessus de la précédente). Il faut alors employer la propriété globalCompositeOperation.
Par défaut la dernière forme dessinée est au dessus de la précédente.
Cet ordre d'empilement peut être changé grâce à la propriété globalCompositeOperation.
Dans la terminologie de cet outil on emploie les termes "source" et "destination".
La "source" est la forme en cours d'ajout tandis que la "destination" est la forme déjà présente.
La valeur par défaut de globalCompositeOperation est "source-over" donc la "source" est au dessus de la "destination".
Mais il existe d'autres valeurs possibles voir le schéma ci-dessous.
Un document HTML est affiché dans un Iframe.
Cliquez sur le bouton de commande et dans la zone de saisie qui s'affiche tapez :
- source-over OU
- destination-over OU
- source-out OU
- source-in OU
- xor
Ou l'une des autres valeurs que vous retrouvez dans le schéma ci-dessus.
Observez attentivement à chaque fois le rendu dans le canevas.
Le code HTML :
Le script :
Nouveauté dans le script : contexte.globalCompositeOperation = valeur
Saisie dans valeur via la fonction prompt(). Bientôt saisie via une zone de liste.