Tutoriel Canvas - sommaire

Canvas : masques et compositions

Nous allons aborder dans ce chapitre des fonctionnalités avancées de la librairie canvas : les masques et les compositions.

Masques

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 correspondant

Le code HTML : <img id ="brune" src ="../images/brune_nue.jpg" width ="1%"> <canvas width = '600' height = '400'></canvas>

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 : function masque() { var canevas = document.querySelector('canvas'); var contexte = canevas.getContext('2d'); var X =canevas.width; var Y = canevas.height; contexte.ellipse(X/2,Y/2,X/2,Y/2,0,0,2*Math.PI); contexte.clip(); var image = document.getElementById('brune'); contexte.drawImage(image,0,0,X,Y) ; } masque();

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.

Travaux pratiques

Ci-dessous document HTML dans un Iframe :

Cette fois le masque est la juxtaposition de deux cercles.

Extrait du code HTML

L'image qui doit être découpée ne fait pas encore partie du DOM. Il faudra donc la charger via le script !

Extrait du 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

Compositions

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.

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".

Citons les principales valeurs que peut prendre cette propriété :
• source-over : la "source" est au dessus de la "destination" ; valeur par défaut
• destination-over : la "destination" se retrouve au dessus de la "source"
• xor : la zone où les deux formes se recouvrent devient transparente
• source-in : la "source" est visible seulement là où source et destination se recouvrent
• source-out : la "source" est visible uniquemnet là où elle ne recouvre pas destination

Mais il existe d'autres valeurs possibles voir le schéma ci-dessous.

Travaux pratiques

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 correspondant

Le code HTML : ... <canvas width = '600' height = '400' style ="width : 60% ; height : auto;"></canvas> <button onclick ="composition()" >Remplir la zone de dessin Canvas</button> ...

Le script : var valeur = ""; function composition() { var canevas = document.querySelector('canvas'); var contexte = canevas.getContext('2d'); var X =canevas.width; var Y = canevas.height; valeur = prompt("saisir source-over OU destination-over OU source-out OU source-in OU xor "); contexte.fillStyle ="red"; contexte.fillRect(X/4, Y/4, X/2,Y/2); contexte.globalCompositeOperation = valeur ; contexte.fillStyle ="green"; contexte.arc(X/4*3,Y/4*3,Y/4,0, Math.PI*2); contexte.fill(); }

Nouveauté dans le script : contexte.globalCompositeOperation = valeur
Saisie dans valeur via la fonction prompt(). Bientôt saisie via une zone de liste.