Ejemplo
Clip de una región rectangular de 200 x 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 del 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() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definición y Uso
Los clip() clips método una región de cualquier forma y tamaño de la tela original.
Tip: Una vez que se recorta una región, todo el dibujo futuro será limitada a la región recortada (no access to other regions on the canvas) . Sin embargo, puede salvar a la región de la lona actual utilizando el save() método antes de utilizar la clip() método, y restaurarla (with the restore() método) en cualquier momento en el futuro.
| la sintaxis de JavaScript: | context . clip() ; |
|---|
<Objeto Canvas