Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Canvas avanzado

Crea tus propios dibujos y animaciones con Canvas en HTML5


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 52

Visitas el mes pasado: 66

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Tutorial de Canvas
mozilla.org
HTML5
htmlya
HTML5 Canvas Element Tutorial
html5canvastutorials
The canvas element
HTML Living Standard
HTML Canvas 2D Context
W3C Working Draft 24 May 2011
HTML - Living Standard
whatwg.org

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




Canvas avanzado (IV)

ç imagen canvas

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



Canvas (avanzado)

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com