Regiones de recorte (clipping region)
El <canvas> de HTML5 nos da la posibilidad de crear regiones de recorte ( clipping regions ), y para esto utilizamos el método clip().
( Hay un cierto parecido entre una región de recorte en el <canvas> y una máscara de Photoshop. )
| Método | JavaScript | Descripción | Defecto |
|---|---|---|---|
| clip() | context.clip() | Recorta una región con la forma y tamaño del trazado dibujado previamente en el canvas. Cualquier cosa dibujada después, será visible solo dentro de la región de recorte ( clipping region ). | <canvas> |
| save() | context.save(); | Guarda el estado actual del canvas. | |
| restore() | context.restore() | Recupera el estado previamente guardado del canvas. |
Vea la chuleta con las propiedades y metodos() de canvas.
Inicialmente el entero <canvas> es por defecto una región de recorte.
Para definir una nueva región, dibujamos un trazado con la forma y el tamaño deseados. Después llamamos el método clip() que transformará el trazado previamente dibujado en una nueva región de recorte,
reemplazando de esta manera, la región de recorte anterior ( o sea: el <canvas> mismo ).
Importante: el contexto de <canvas> no acepta más que una sola región de recorte.
En el siguiente ejemplo esbozamos un circulo con el radio de 100px y, llamamos el método clip() para convertirlo en una nueva región de recorte.
ctx.arc(125,120,100,0,2*Math.PI); ctx.clip();
Después insertamos una imagen. Lea este capitulo para saber cómo utilizar imágenes en el canvas
var img=new Image();
img.src = "images/enfeinada250.jpg";
img.onload = function() {
ctx.drawImage(this, 0, 20);
}
La imagen aparece recortada.
var canvas = document.getElementById("lienzo");
if (canvas && canvas.getContext) {
var ctx = canvas.getContext("2d");
if (ctx) {
ctx.beginPath();
ctx.arc(125,120,100,0,2*Math.PI);
ctx.clip();
var img=new Image();
img.src = "images/enfeinada250.jpg";
img.onload = function() {
ctx.drawImage(this, 0, 20);
}
}
}Arreglar desperfectos ( con globalCompositeOperation )
Todo parece funcionar muy bien, pero en Google Chrome el borde de nuestra imagen aparece pixelado y muy feo.
Para arreglar este desperfecto, en lugar de clip() podemos utilizar la propiedad globalCompositeOperation.
Para saber más acerca de globalCompositeOperation por favor lea el siguiente capitulo acerca de combinar trazados
var canvas2 = document.getElementById("lienzo2");
if (canvas2 && canvas2.getContext) {
var ctx2 = canvas2.getContext("2d");
if (ctx2) {
ctx2.beginPath();
ctx2.arc(125,120,100,0,2*Math.PI);
ctx2.fill()
// ctx2.clip ( );
ctx2.globalCompositeOperation = "source-atop";
var img=new Image();
img.src = "images/enfeinada250.jpg";
img.onload = function() {
ctx2.drawImage(this, 0, 20);
}
}
}
Et voila: ahora tenemos un borde perfecto, incluso en Google Chrome.