Méthode clip() du canvas
Définition et utilisation
clip() La méthode peut couper n'importe quelle forme et taille à partir du canevas original.
Avis :Une fois une zone coupée, toutes les dessins suivants seront limités à la zone coupée (ils ne peuvent pas accéder à d'autres zones de la toile). Vous pouvez également sauvegarder la zone actuelle de la toile avant d'utiliser la méthode clip() en utilisant la méthode save(), et la restaurer à tout moment ultérieur (par la méthode restore()).
Exemple
Couper une zone de 200*120 pixels de la toile. Ensuite, dessiner un rectangle vert. Seule la partie du rectangle vert dans la zone coupée est visible :
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Couper la zone de rectangle
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// Après clip(), dessiner un rectangle vert
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);
Syntaxe
context.clip();
Support du navigateur
Les numéros dans le tableau indiquent la version du navigateur qui prend en charge cette propriété pour la première fois.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Remarque :Les versions 8 et antérieures d'Internet Explorer ne prennent pas en charge l'élément <canvas>.
