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

Visitas el mes pasado: 196

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

Rotación

Concepto de rotación.

imagen canvas

La rotación en canvas consiste en hacer rotar todo el canvas. Para ello necesitamos un punto que será el eje de giro o centro alrededor del cual gira el canvas. Este punto será el origen de coordenadas. Es decir el canvas gira alrededor de su origen de coordenadas.

El origen de coordenadas por defecto está siempre en la esquina superior izquierda. Si queremos cambiarlo para que gire alrededor de otro punto utilizaremos la traslación o método translate() antes de aplicar la rotación.

La rotación se hace siempre en el sentido de las agujas del reloj (dextrogiro), y se mide en radianes.


El método rotate()

El método rotate() sirve para rotar el canvas sobre su origen, y sólo tiene un parámetro que es el ángulo de rotación medido en radianes:

cxt.rotate(rad);

Al igual que en el método translate() la rotación sólo afecta a lo que dibujemos después de escribir el método, quedando lo anterior como estaba.

Como normalmente sólo querremos rotar algunas figuras, debemos usar el método save() antes de rotar la figura. También debemos antes cambiar el origen de coordenadas mediante translate() al punto que será el centro de rotacion. Una vez rotado usamos el método restore() para volver al estado anterior del canvas.


Convertir a radianes

En la mayoría de las ocasiones tenemos los ángulos en grados, o hemos pensado un ángulo en grados para un cierto dibujo. Debemos pasarlo a radianes si queremos ponerlo en el canvas.

Un radián es un arco cuya medida es igual al radio de la circunferencia, por lo que una circunferencia tiene 2 x PI radianes. Por tanto si tenemos un angulo en grados, para pasarlo a radianes haremos:

rad=(gr*2*Math.PI)/360;

simplificamos la fracción y obtenemos la fórmula:

rad=(gr*Math.PI)/180;

donde rad es el resultado en radianes y gr es el número de grados que queremos rotar.


Ejemplo de rotación

Como ejemplo haremos un canvas con un reloj analógico o de esfera, en él marcaremos dentro de un círculo (la esfera) los números de las horas, y una raya para cada minuto. Después buscamos mediante javascript la hora y la ponemos en las manecillas o saetas del reloj.

El ejemplo aunque un poco largo y complicado creo que vale la pena, ya que colocar un reloj analógico en la página es uno de los efectos más buscados en los diseñadores.

Verás como el método rotate() es imprescindible para realizarlo.


Marco del reloj

Empezamos creando un canvas cuadrado que será el marco del reloj, como queremos hacer las cosas bien, crearemos un cuadrado que ocupe todo el canvas coloreado mediante gradientes de color. Primero vemos el código del canvas en el HTML:

<canvas id="reloj" width="300" height="300">
</canvas>

Empezamos a rellenar el canvas con javascript. Primero hacemos el marco, el cual lleva un gradiente de color. El resto de elementos los crearemos mediante funciones por lo que dejaremos ya en el código la llamada a las funciones que iremos creando mas adelante. en javascript escribiremos lo siguiente:

window.onload=function() {
cxt=iniciaCanvas("reloj")
//Como fondo ponemos una gradiente de color ocupando todo el canvas.
grad1=cxt.createLinearGradient(150,0,150,300);
//Los tonos de la gradiente se repiten en horizontal, por lo que creamos un bucle.
for (i=0; i<1;i+=0.2) { //tonos repetidos para gradiente de color.
    grad1.addColorStop(i,"#a67a4b");
    grad1.addColorStop(i+0.1,"#c49708");
		}
cxt.fillStyle=grad1; //relleno con gradiente de color.
cxt.fillRect(0,0,300,300); //cuadrado que ocupa todo el canvas.
cxt.translate(150,150); //trasladamos origen al centro del canvas.
circulo(); //función que crea la esfera.
horas(); //funcion que crea las saetas.
tapon(); //función de adorno círculo pequeño central.
}

De momento hemos rellenado un cuadrado ocupando todo el canvas con una gradiente de color, tal como ves aquí a la derecha.

después hemos trasladado el origen de coordenadas al centro del canvas. A partir de aquí trabajaremos con este origen de coordenadas.

Después hemos llamado a una serie de funciones que crearemos en los siguientes pasos. La función circulo() creará la esfera del reloj. La función horas() buscará la hora actual y creará las manecillas. Y la función tapon() creará un pequeño círculo de adorno que tapa el punto central donde se juntan las manecillas.


esfera del reloj

La esfera del reloj es el círculo que contiene los números y marcas sobre los que están las manecillas. Con la función círculo() crearemos la esfera.

La esfera se compone de un círculo en el que tenemos los números de las horas y las marcas de los minutos. Primero crearemos el círculo, y luego iremos rotando el canvas para colocar las marcas de los minutos y las horas.

Hay 60 marcas en total, por lo que para saber el ángulo de rotacion haremos 360/60=6. Cada 6 grados colocaremos una marca. Las marcas de las horas son 12, por lo que 360/12=30. Cada 30 grados habrá una marca de hora y el resto de marcas (haciendolas cada 6 grados) serán las de los minutos.

Las marcas de las horas son los números del 1 al 12. Si las ponemos mediante rotación, los números aparecerán en su sitio, pero rotados. para volver a ponerlos en su sitio debemos cambiar el eje de rotación al centro del número y rotarlos en sentido inverso tantos grados como hayamos avanzado en el círculo.

Construimos la esfera con la función circulo() de javascript. Vemos ahora el código comentado de esta función:

function circulo() {
   cxt.beginPath() //Círculo de la esfera: iniciar ruta:
   //gradiente de color para la esfera del reloj
   grad2=cxt.createRadialGradient(0,0,30,0,0,150);
   grad2.addColorStop(0,"#e1f6ff");
   grad2.addColorStop(1,"#a0d0f9");
   cxt.arc(0,0,140,0,2*Math.PI,false); //círculo de la esfera
   cxt.strokeStyle="navy"; //color de línea
   cxt.fillStyle=grad2; //color de fondo
   cxt.lineWidth=3; //grosor de línea
   cxt.stroke(); //dibuja línea
   cxt.fill(); //rellena figura
   //Guardamos el estado antes de empezar a rotar para poner las marcas.
   cxt.save();
   //Bucle para poner las marcas. el bucle marcará el círculo cada 6 grados.
   for (i=0;i<360;i+=6) {
        //Ponemos la marca en la esfera antes de rotarla. para ello:
        ang=(i*Math.PI)/180; //calculamos el ángulo de lo que llevamos rotado.
        rad=(6*Math.PI)/180; //pasamos a radianes los 6 grados de cada rotacion.
        //Ponemos márca de hora; solo si num de grados es divisible por 30.
        if (i% 30==0) {
            num=i/30+6 //ajustamos el número para verlo en la esfera.
            if (num>12) {
                num-=12;
                }
            cxt.beginPath(); //escribir número en esfera: iniciamos ruta
            cxt.save(); //guardamos antes de cambiar el origen
            cxt.translate(0,120); //cambiamos el origen al punto donde se escribirá el número
            //rotamos lo avanzado en sentido contrario: 
            //el numero no debe rotar pero sí su posición.
            cxt.rotate(-ang);
            cxt.font="bold 15px arial"; //tipografía y estilo
            cxt.textAlign="center" //centrado horizontal
            cxt.textBaseline="middle"; //centrado vertical
            cxt.fillStyle="navy"; //color de texto
            cxt.fillText(num,0,0); //escribir número de la esfera
            cxt.restore(); //devolver origen al centro del círculo
            }
       //Ponemos marca de minuto cuando no hay marca de hora
       else {
            cxt.beginPath(); //iniciamos ruta
            cxt.lineWidth=1; //ancho de línea
            cxt.moveTo(0,125); //la marca será una pequeñá línea 
            cxt.lineTo(0,130);
            cxt.stroke(); //dibujamos la línea
            }
       //después de escribir la marca rotamos 6 grados antes de repetir el bucle.
       cxt.rotate(rad);
       }
   //Acabado el bucle devolvemos al canvas el estado inicial.
   cxt.restore()
   }

El código puede parecer un poco largo porque hemos tenido que rotar dos veces para colocar los números en la esfera del reloj. el resultado es el que ves aquí a la derecha.

Para conseguirlo hemos hecho un bucle en el que en cada vuelta rotamos el espacio correspondiente a un minuto. Según le corresponda incluimos ahí la raya que marca el minuto o el número que marca las horas.


Hora y manecillas.

El siguiente paso es poner las manecillas del reloj marcando la hora. De momento pondremos la hora en la que se carga la página, la cual se obtiene en javascript mediante el objeto new Date();

Puedes ver cómo funciona este objeto en nuestro manual de javascript, página 10.1 La fecha. Una vez obtenida la fecha tenemos también varios métodos para obtener la hora, el minuto y el segundo.

Crearemos dos funciones, una la función horas() que teníamos pendiente de crear porque la llamabamos al principio de la página, y que nos buscará la fecha actual, y a partír de ahí obtenemos la hora, el minuto y el segundo.

En la función anterior llamamos a la segunda funcion: saetas(), que nos dibujará en el canvas las saetas en la posición marcada en la anterior. La función saetas() recibirá tres parámetros, el primero es la hora, minuto o segundo, según la manecilla a dibujar, el segundo y tercero serán la largura y grosor de la saeta.

Vemos ahora el código javascript para crear las saetas del reloj. Empezamos por el código de la función horas();

function horas() {
    fecha=new Date(); //obtener la fecha
    hora=fecha.getHours(); //obtener la hora
    minuto=fecha.getMinutes(); //obtener el minuto
    segundo=fecha.getSeconds(); //obtener el segundo
    cxt.save(); //Guardamos antes de rotar el canvas
    //Rotamos 180º para que coincida la rotación del canvas con la del reloj.
    cxt.rotate(Math.PI);
    //manecilla de las horas
    gr=(hora+minuto/60)*30; //calculo posición de manecilla de las horas
    rad=gr*Math.PI/180; //pasar a radianes.
    saetas(rad,90,10); //Dibujar la manecilla horas
    //manecilla de los minutos: mismos pasos que en la anterior.
    gr=minuto*6;
    rad=gr*Math.PI/180;
    saetas(rad,110,7);
    //manecilla de los segundos; Seguimos los mismos pasos
    gr=segundo*6;
    rad=gr*Math.PI/180;
    saetas(rad,110,3);
    cxt.restore();//recuperamos el estado anterior del canvas.
    }

A continuación creamos la función saetas() la cual es llamada varias veces en la función anterior.

function saetas(rad,largo,grueso) { 
    cxt.save();//guardar el estado del canvas.
    cxt.beginPath() //iniciar ruta
    cxt.lineWidth=grueso; //grosor de la manecilla
    cxt.rotate(rad); //ángulo de rotación de la manecilla
    cxt.moveTo(0,0); //inicio en el centro
    cxt.lineTo(0,largo); //línea que define la manecilla
    cxt.stroke(); //dibujar manecilla
    cxt.restore(); //volver a estado anterior: deshacer rotacion.
    }

El ejercicio lo tenemos ahora tal como aparece en el canvas de la derecha.

Las funciones anteriores no tienen mayor dificultad. La función horas() busca la hora, minuto y segundo, y la transforma en los radianes que hay que pasar a la función saetas(), en la cual se dibuja la posición, largura y grosor de la saeta de acuerdo con los datos que se le han pasado.


Retoque final y puesta en marcha.

Para acabar el reloj, pondremos un circulito en el centro que tapa el punto donde se juntan las saetas. Esto lo haremos mediante la función tapon(), que todavía teníamos pendiente de crear.

Por último lo pondremos en marcha para que funcione. Para ello debemos llamar a las funciones anteriores cada segundo, de manera que a cada segundo se recargan con la hora actual.

En javascript esto se hace mediante el método setInterval(); que tiene dos parámetros: el primero llama a una función, y el segundo indica cada cuantos milisegundos debe repetirse.

Veamos en primer lugar el código de la función tapon().

function tapon() {	
    cxt.beginPath(); //iniciamos ruta
    grad3=cxt.createRadialGradient(0,0,2,0,0,30); //gradiente de color
    grad3.addColorStop(0,"#ff9c00");
    grad3.addColorStop(1,"#a05905");
    cxt.arc(0,0,15,0,2*Math.PI,false); //círculo central
    cxt.fillStyle=grad3; //relleno con gradiente
    cxt.fill(); //rellenar
    }

Ahora pondremos el reloj en marcha mediante el método setInterval() de javascript. Este es el código que pondremos después de todo el código anterior.

setInterval(cadaSegundo,1000); //repetir cada segundo 
//función que se repite cada segundo: llamamos a las demás funciones.
function cadaSegundo() { 
circulo(); 
horas();
tapon();
}

El resultado es el reloj ya en funcionamiento, como puedes ver aquí a la derecha.

Si ya conoces javascript sabrás que el método setInterval() permite crear animaciones simples al repetir el código cada cierto tiempo.

Para construir el rejoj hemos trasladado el origen del canvas al punto central del mismo. Después hemos usado el método rotate varias veces, tanto para poner las marcas de las horas y minutos, como para crear las manecillas.

Por último la puesta en marcha la hemos hecho mediante el método setInterval() de javascript.

Con pequeñas variaciones respecto a tamaños, fondos y colores, podemos crear con este código distintos relojes analógicos para ponerlos en nuestras páginas.






En la siguiente página veremos otro tipo de transformaciones: el escalado.

Escalado



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