Méthode HTML canvas clip()
Exemple
Clip d'une région rectangulaire de 200*120 pixels du canevas. Ensuite, dessinez un rectangle rouge. Seule la partie du rectangle rouge qui se trouve à l'intérieur de la zone découpée est visible :
JavaScript :
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Clip a rectangular area
ctx.rect(50, 20, 200, 120);
ctx.stroke();
ctx.clip();
// Draw red rectangle after clip()
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 150, 100);
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la méthode.
| Method | |||||
|---|---|---|---|---|---|
| clip() | Yes | 9.0 | Yes | Yes | Yes |
Définition et utilisation
La méthode clip() découpe une région de n'importe quelle forme et taille du canevas d'origine.
Astuce : Une fois qu'une région est découpée, tous les futurs dessins seront limités à la région découpée (pas d'accès aux autres régions du canevas). Vous pouvez cependant enregistrer la zone de canevas actuelle à l'aide de la méthode save() avant d'utiliser la méthode clip() et la restaurer (avec la méthode restore()) à tout moment dans le futur.
| Syntaxe JavaScript : | contexte .clip(); |
|---|
❮ Référence de canevas HTML