Méthode clip() de Canvas
Exemple
Découpez une région de 200 x 120 pixels du contexte. 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 :
Sans clip() :
Avec clip() :
JavaScript :
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Découpez une zone rectangulaire
ctx.rect(50, 20, 200, 120);
ctx.stroke();
ctx.clip();
// Dessiner un rectangle rouge après clip()
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 150, 100);
</script> Description
La méthode clip() découpe une région de n'importe quelle taille du contexte original.
Remarque
Lorsqu'une région est découpée, les dessins futurs sont limités à cette région.
Cependant, vous pouvez enregistrer les paramètres du contexte avec la méthode save() avant d'utiliser clip(), et utiliser restore() pour les restaurer plus tard.
Syntaxe
| context .clip(); |
Paramètres
| AUCUN |
Valeur de retour
| AUCUN |
Support des navigateurs
L'élément <canvas> est une norme HTML5 (2014).
clip() est pris en charge dans tous les navigateurs modernes :
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Oui | Oui | Oui | Oui | Oui | 9-11 |