Méthode clip() canvas HTML
Définition et utilisation
clip() La méthode clip() peut couper n'importe quelle forme et taille à partir du canevas original.
Astuce :Une fois une région coupée, toutes les dessins suivants seront limités à la région coupée (ils ne pourront pas accéder à d'autres régions du canevas). Vous pouvez également sauvegarder la région actuelle du canevas avant d'utiliser la méthode clip() en utilisant la méthode save(), et la restaurer à tout moment par la suite (à l'aide de la méthode restore()).
Exemple
Coupez une région rectangulaire de 200*120 pixels du canevas. Ensuite, dessinez un rectangle vert. Seule la partie verticale coupée est visible :
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Région rectangulaire de coupe
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// Dessiner un rectangle vert après clip()
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);
Syntaxe
context.clip();
Prise en charge du navigateur
Les nombres 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 :Internet Explorer 8 et les versions antérieures ne prennent pas en charge l'élément <canvas>.
