Ejemplo
Clip de una región rectangular de 200*120 píxeles desde el lienzo. A continuación, dibuje un rectángulo rojo. Sólo la parte del rectángulo de color rojo que se encuentra dentro del área recortada es 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);
</script> Inténtalo tú mismo " Soporte para el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el método.
| Método | |||||
|---|---|---|---|---|---|
| clip() | Sí | 9.0 | Sí | Sí | Sí |
Definición y Uso
Los clip() clips método de una región de cualquier forma y tamaño de la tela original.
Consejo: Una vez que se recorta una región, todo el dibujo futuro será limitada a la región recortada (sin acceso a otras regiones en el lienzo).Sin embargo, puede guardar la zona de la tela actual utilizando el save() método antes de utilizar la clip() método, y restaurarla (con la restore() método) en cualquier momento en el futuro.
| la sintaxis de JavaScript: | context.clip(); |
|---|