Método HTML canvas clip()
Ejemplo
Clip de una región rectangular de 200*120 píxeles del lienzo. Luego, dibuja un rectángulo rojo. Solo se ve la parte del rectángulo rojo que está dentro del área recortada:
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);
</script>
Compatibilidad con navegador
Los números en la tabla especifican la primera versión del navegador que soporta totalmente este método.
| Method | |||||
|---|---|---|---|---|---|
| clip() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definición y uso
El método clip() recorta una región de cualquier forma y tamaño del lienzo original.
Sugerencia: una vez que se recorta una región, todos los dibujos futuros se limitarán a la región recortada (sin acceso a otras regiones en el lienzo). Sin embargo, puede guardar la región del lienzo actual con el método save() antes de usar el método clip() y restaurarla (con el método restore()) en cualquier momento en el futuro.
| Sintaxis de JavaScript: | contexto .clip(); |
|---|
❮ Objeto de lienzo