Logo

Complementos y nuevas tendencias en la programación web

Manuales web avanzados

Por Anyelguti

Este curso forma parte del proyecto Aprende Web

logo

Canvas avanzado IV

Región de ajuste

Concepto de Región de ajuste

La región de ajuste es el espacio en el que se puede dibujar, que en principio coincide con el del propio canvas. Sin embargo mediante el método clip() podemos variar la región de ajuste, y hacer que sólo se pueda dibujar en una parte del canvas. El método clip() no tiene parámetros.

Crear una región de ajuste

Para crear una región de ajuste, primero debemos escribir una ruta con una o varias figuras en el canvas. Después llamamos al método clip(), que convertirá el interior de esas figuras en una nueva región de ajuste.

Una vez dentro de la nueva región de ajuste, lo que dibujemos sólo se verá si está dentro de la/las figura/s que hayamos definido. Atención, las coordenadas para el dibujo serán las mismas que para el canvas.

Para salir de la región de ajuste y poder volver a dibujar en todo el canvas, antes de llamar al método clip() debemos guardar el estado del canvas mediante el método save(). Así, cuando queramos volver a dibujar en todo el canvas, llamamos al método restore() que recupera el estado anterior, y nos saca de la región de ajuste.

La secuencia de comandos en javascript sería la siguiente:

window.onload=function() {
cxt=iniciaCanvas("micanvas");
//código javascript anterior del canvas ...
cxt.beginPath(); //iniciamos la ruta
cxt.arc(110,110,100,0,2*Math.PI); //dibujamos figura (círculo)
cxt.save(); //guardar el estado.
cxt.clip(); //nueva región de ajuste
  /*... dibujamos aquí las figuras que van dentro de la 
   región de ajuste. Sólo se verán si están dentro del círculo
   dibujado anteriormente.*/
cxt.restore(); //restauramos estado y salimos de la región de ajuste.
//seguimos dibujando utilizando todo el canvas.
}

Ejemplo de región de ajuste.

Crearemos un canvas con una región de ajuste que será un círculo grande en el cual dibujaremos otros círculos que sólo se verán a medias porque parte de ellos sobresalen de la región.

También dibujaremos otras dos figuras fuera de la región de ajuste, una antes y otra después de crearla.

Empezamos como siempre por el código en HTML:

<canvas id="ejemplo1" width="230" height="280">
</canvas>

A continuación vemos el código javascript del canvas, el cual viene comentado para indicar lo que estamos haciendo en cada momento:

window.onload=function() {
cxt=iniciaCanvas("ejemplo1")
//dibujar semicírculo inferior izquierdo
cxt.beginPath(); //iniciar ruta
cxt.strokeStyle="green"; //color de línea: verde
cxt.fillStyle="yellow"; //color de relleno: amarillo
cxt.lineWidth=3; //grosor de línea: 3px.
cxt.arc(60,270,50,0,Math.PI,true); //semicírculo
cxt.closePath(); //cerrar figura
cxt.stroke(); //dibujar líneas
cxt.fill();  //rellenar figura

//Circulo grande que será la región de ajuste
cxt.beginPath(); //nueva ruta
cxt.arc(110,110,100,0,2*Math.PI); //circulo grande
cxt.save(); //guardamos el estado del canvas
cxt.strokeStyle="#f0f"; //color línea para círculo grande
cxt.lineWidth=5; //grosor línea para círculo grande
cxt.stroke() //dibujar línea


cxt.clip(); //nueva región de ajuste. 
//dibujaremos ahora tres círculos semitransparentes:

cxt.beginPath(); //nueva ruta, círculo rojo
cxt.fillStyle="rgba(255,0,0,0.5)"; //color relleno: rojo
cxt.arc(110,190,100,0,2*Math.PI); //figura del círculo
cxt.fill(); //rellenar círculo

cxt.beginPath(); //nueva ruta, círculo azul
cxt.fillStyle="rgba(0,255,0,0.5)"; //color relleno: azul
cxt.arc(30,60,100,0,2*Math.PI); //figura del círculo
cxt.fill(); //rellenar círculo

cxt.beginPath(); //nueva ruta, círculo verde
cxt.fillStyle="rgba(0,0,255,0.5)"; //color relleno: verde
cxt.arc(190,60,100,0,2*Math.PI); //figura del círculo
cxt.fill(); //rellenar círculo

//restauramos el estado anterior y salimos de la región de ajuste:
cxt.restore();
//dibujar semicírculo inferior derecho
cxt.beginPath(); //nueva ruta
cxt.arc(170,270,50,0,Math.PI,true); //figura del semicírculo
cxt.closePath(); //cerrar figura
cxt.stroke(); //dibujar líneas
cxt.fill(); //rellenar figura
}

El resultado del código anterior es el canvas que tenemos aquí a la derecha.

La región de ajuste es el círculo grande, por lo que de los círculos dibujados dentro de ella sólo se ve la parte que está dentro del círculo grande.

Los semicírculos pequeños están dibujados fuera de la región de ajuste. El de la izquierda antes de entrar en ella y el de la derecha después.

Debemos resaltar la importancia del mecanismo de guardar y restaurar, sin el cual no hubieramos podido salir de la región de ajuste para dibujar el segundo semicírculo.






En la siguiente pagina veremos las operaciones de composición que nos permiten variar el comportamiento de un elemento respecto a los dibujados anteriormente. Composición



Manual Canvas avanzado

Anterior siguiente     Siguiente siguiente

Ver estadísticas

Free counter and web stats
Visita nuestro foro:

Puedes consultar tus dudas y sugerencias:

sobre el foro (info y entrar)

Página creada por ANYELGUTI.

Manda tus sugerencias:
aprendeweb@ymail.com ... manda un correo