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: 288

Visitas el mes pasado: 82

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 (V)

Composición

imagen canvas

Concepto

Al dibujar en canvas, cada dibujo que hacemos se superpone a los anteriores, esto puede limitar nuestras acciones. La composicion, o mejor dicho, las operaciones de composición cambian la forma de interactuar de la última figura creada con las anteriores. Esto no se limita sólamente a la figura que estará delante de las otras, sino que hay otra serie de posibilidades.


Propiedad globalCompositeOperation

Las operaciones de composición se realizan mediante la propiedad globalCompositeOperation la cual tiene la siguiente sintaxis:

cxt.globalCompositeOperation= "source-over" | "destination-over" | "source-in" | "destination-in" | "source-out" | "destination-out" | "source-atop" | "destination-atop" | "ligter" | "daker" | "xor" | "copy"


La propiedad globalCompositeOperation tiene doce posibles valores que son estos que aparecen aquí arriba. Todos ellos son cadenas de texto, por lo que deben ir entre comillas, o pasados con una variable que las contenga.

La propiedad indica la relación que tiene la figura que escribamos después de ella con el resto del canvas que hay escrito antes dentro de la misma región de ajuste.

Para ver el significado de los distintos valores de esta propiedad vamos a construir un canvas en el que aparezcan todos los valores, en el que se vea la diferencia entre aplicar uno u otro.

NOTA: Esta propiedad no está disponible en Internet 8 o inferior (es decir en la librería flashCanvas que nos permite ver Canvas en estos navegadores), por lo que para ver bien el resultado del siguiente ejemplo no deberías usar estos navegadores.


Canvas con los valores de globalCompositeOperation

Crearemos ahora un canvas con los distintos valores de la propiedad globalCompositeOperation. El canvas consistirá en una serie de rectángulos a modo de celdas de una tabla. En cada uno de ellos tendremos el comportamiento de esta propiedad con cada uno de sus valores.

Los rectángulos o celdas los crearemos mediante un bucle. Dentro de cada uno de ellos pondremos una región de ajuste, con dos figuras, una antes de aplicar el método globalCompositeOperation y otra despues.

Antes de crear el bucle tenemos que dar unos valores iniciales que irán variando a lo largo del bucle. Asimismo crearemos un array con todos los valores que tiene la propiedad, para poder aplicar en cada celda un valor distinto.

Creamos el canvas, lo primero que hacemos es poner el código HTML:

<canvas id="ejemplo1" width="200" height="540">
</canvas>

Vemos ahora el código javascript del canvas, el cual está comentado para entender lo que vamos haciendo.

window.onload=function() {
cxt=iniciaCanvas("ejemplo1")
var x=0; //posición inicial primera celda: coord. X
var y=0; //posición inicial primera celda: coord Y
var r=30; //radio de circunferencias 
var ini=0; //inicio arco circunferencias
var fin=2*Math.PI; //final arco circunferencias
//array de valores de globalCompositeOperation.
var valor=new Array();
valor[0]="source-over";
valor[1]="destination-over";
valor[2]="source-in";
valor[3]="destination-in";
valor[4]="source-out";
valor[5]="destination-out";
valor[6]="source-atop";
valor[7]="destination-atop";
valor[8]="lighter";
valor[9]="daker";
valor[10]="xor";
valor[11]="copy";
//bucle ; diferentes celdas para distintos valores:
for (i=0; i<valor.length; i++) {
    //Valores de coordenadas de elementos dentro de la celda:
    w=x+100; //ancho de celda
    h=y+90; //alto de celda
    rx1=x+35; //centro del círculo rojo, coord. X
    ry1=y+35; //centro del círculo rojo, coord. Y
    rx2=x+65; //centro del círculo verde, coord. X
    ry2=y+35; //centro del círculo verde, coord. Y
    tx=x+10; //inicio de texto explicativo, coord X
    ty=y+85; //inicio de texto explicativo, coord Y
    //Dibujar celda: 
    cxt.beginPath(); //iniciar ruta
    cxt.moveTo(x,y); //punto inicial;
    cxt.lineTo(w,y); //línea superior
    cxt.lineTo(w,h); //línea derecha
    cxt.lineTo(x,h); //linea inferior
    cxt.closePath(); //cerrar camino: línea izquierda.
    cxt.stroke(); //dibujo de líneas;
    //crear región de ajuste y dibujar en ella dos círculos:
    cxt.save(); //guardar estado del canvas
    cxt.clip(); //entrar en nueva región de ajuste.
    cxt.beginPath(); //nueva ruta: círculo rojo.
    cxt.fillStyle="red"; //color relleno, rojo
    cxt.arc(rx1,ry1,r,ini,fin); //definir círculo
    cxt.fill(); //rellenar de color
    //aplicar operación de composición: según valor del array.
    cxt.globalCompositeOperation=valor[i]; 
    cxt.beginPath(); //nueva ruta: círculo verde
    cxt.fillStyle="green"; //color relleno, verde.
    cxt.arc(rx2,ry2,r,ini,fin); //definir ciírculo
    cxt.fill(); //rellenar de color
    //volver a estado anterior y salir de región de ajuste.
    cxt.restore(); 
    //texto explicativo debajo del dibujo:
    cxt.font="normal 11px arial"; //estilo de texto
    num=i+1; //número de celda.
    cxt.fillText(num+". "+valor[i],tx,ty); //texto: núm de celda + valor propiedad.
    //preparar la siguiente celda.
    x+=100; //añadir una celda horizontal a la derecha.
    if (x>=200) { //cada 2 celdas horizontales pasamos a siguiente línea vertical
        x=0; //valor para nueva línea de celdas coord.X
        y+=90; //valor para nueva línea de celdas coord.Y
        }
    }
}

Vemos aquí a la derecha el canvas que hemos creado con el comportamiento de la propiedad globalCompositeOperation para sus diferentes valores.

En todos los ejemplos el círculo rojo está creado antes de la operación de composición y lo nombraremos como el "contenido anterior" del canvas. El círculo verde lo creamos después de aplicar la operación lo nombramos como "nueva forma". Veamos ahora los valores de esta propiedad:






En la siguiente pagina empezaremos a ver los métodos de transformaciones. El primero que veremos será la traslacion.

Traslació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