miércoles, 14 de octubre de 2015

Dibujar gráficos en HTML - 1 de 3



Luego de que el elemento <canvas> y su contexto han sido inicializados podemos finalmente comenzar a crear y manipular gráficos. La lista de herramientas provista por la API para este propósito es extensa, desde la creación de simples formas y métodos de dibujo hasta texto, sombras o transformaciones complejas. Vamos a estudiarlas una por una.

  • Dibujando rectángulos

Normalmente el desarrollador deberá preparar la figura a ser dibujada en el contexto (como veremos pronto), pero existen algunos métodos que nos permiten dibujar directamente en el lienzo, sin preparación previa. Estos métodos son específicos para formas rectangulares y son los únicos que generan una forma primitiva (para obtener otras formas tendremos que combinar otras técnicas de dibujo y trazados complejos). Los métodos disponibles son los siguientes:

    • fillRect(x, y, ancho, alto) :Este método dibuja un rectángulo sólido. La esquina superior izquierda será ubicada en la posición especificada por los atributos x e y. Los atributos ancho y alto declaran el tamaño.
    • strokeRect(x, y, ancho, alto) :Similar al método anterior, éste dibujará un rectángulo vacío (solo su contorno).
    • clearRect(x, y, ancho, alto) :Esta método es usado para substraer pixeles del área especificada por sus atributos. Es un borrador rectangular.


Código 7-3. Dibujando rectángulos.

function iniciar(){
var elemento=document.getElementById('lienzo');
lienzo=elemento.getContext('2d');
lienzo.strokeRect(100,100,120,120);
lienzo.fillRect(110,110,100,100);
lienzo.clearRect(120,120,80,80);
}
window.addEventListener("load", iniciar, false);

Esta es la misma función del Código 7-2, pero incorpora los nuevos métodos estudiados para dibujar una figura en el lienzo. Como puede ver, el contexto fue asignado a la variable global lienzo, y ahora esta variable es usada para referenciar el contexto en cada método.
El primer método usado en la función, strokeRect(100,100,120,120), dibuja un rectángulo vacío con la esquina superior izquierda en la posición 100,100 y un tamaño de 120 pixeles (este es un cuadrado de 120 pixeles). El segundo método, fillRect(110,110, 100,100), dibuja un rectángulo sólido, esta vez comenzando desde la posición 110,110 del lienzo. Y finalmente, con el último método, clearRect(120,120,80,80), un recuadro de 80 pixeles es substraído del centro de la figura.

Figura 7-1. Representación del lienzo y los rectángulos dibujados por el código del Código 7-3.


La Figura 7-1 es solo una representación de lo que verá en la pantalla luego de ejecutar el Código 7-3. El elemento <canvas> es como una grilla, con su origen en la esquina superior izquierda y el tamaño especificado en sus atributos. Los rectángulos son dibujados en el lienzo en la posición declarada por los atributos x e y, y uno sobre el otro de acuerdo al orden en el código (el primero en aparecer en el código será dibujado primero, el segundo será dibujado por encima del anterior, y así sucesivamente). Existe un método para personalizar cómo las figuras son dibujadas en pantalla, pero lo veremos más adelante.

  • Colores

Hasta el momento hemos usado el color otorgado por defecto, negro sólido, pero podemos especificar el color que queremos aplicar mediante sintaxis CSS utilizando las siguientes propiedades:
    • strokeStyle :Esta propiedad declara el color para el contorno de la figura.
    • fillStyle Esta :propiedad declara el color para el interior de la figura.
    • globalAlpha :Esta propiedad no es para definir color sino transparencia. Especifica la transparencia para todas las figuras dibujadas en el lienzo.


Código 7-4. Aplicando color.

function iniciar(){
var elemento=document.getElementById('lienzo');
lienzo=elemento.getContext('2d');
lienzo.fillStyle="#000099";
lienzo.strokeStyle="#990000";
lienzo.strokeRect(100,100,120,120);
lienzo.fillRect(110,110,100,100);
lienzo.clearRect(120,120,80,80);
}
window.addEventListener("load", iniciar, false);

Los colores en el Código 7-4 fueron declarados usando números hexadecimales.
Podemos también usar funciones como rgb()o incluso especificar transparencia para la figura aprovechando la función rgba(). Estos métodos deben ser siempre escritos entre comillas (por ejemplo, strokeStyle="rgba(255,165,0,1)").
Cuando un nuevo color es especificado se vuelve el color por defecto para el resto de los dibujos, a menos que volvamos a cambiarlo más adelante. 
A pesar de que el uso de la función rgba() es posible, existe otra propiedad más específica para declarar el nivel de transparencia: globalAlpha. Su sintaxis es globalAlpha=valor, donde valor es un número entre 0.0 (totalmente opaco) y 1.0 (totalmente transparente).

  • Gradientes

Gradientes son una herramienta esencial en cualquier programa de dibujo estos días, y esta API no es la excepción. Así como en CSS3, los gradientes en la API Canvas pueden ser lineales o radiales, y pueden incluir puntos de terminación para combinar colores.
    • createLinearGradient(x1, y1, x2, y2) :Este método crea un objeto que luego será usado para aplicar un gradiente lineal al lienzo.
    • createRadialGradient(x1, y1, r1, x2, y2, r2) :Este método crea un objeto que luego será usado para aplicar un gradiente circular o radial al lienzo usando dos círculos. Los valores representan la posición del centro de cada círculo y sus radios.
    • addColorStop(posición, color) :Este método especifica los colores a ser usados por el gradiente. El atributo posición es un valor entre 0.0 y 1.0 que determina dónde la degradación comenzará para ese color en particular.


Código 7-5. Aplicando un gradiente lineal al lienzo.

function iniciar(){
var elemento=document.getElementById('lienzo');
lienzo=elemento.getContext('2d');
var gradiente=lienzo.createLinearGradient(0,0,10,100);
gradiente.addColorStop(0.5, '#0000FF');
gradiente.addColorStop(1, '#000000');
lienzo.fillStyle=gradiente;
lienzo.fillRect(10,10,100,100);
lienzo.fillRect(150,10,200,100);
}
window.addEventListener("load", iniciar, false);

En el Código 7-5, creamos el objeto gradiente desde la posición 0,0 a la 10,100, otorgando una leve inclinación hacia la izquierda. Los colores fueron declarados por el método addColorStop() y el gradiente logrado fue finalmente aplicado a la propiedad fillStyle, como un color regular.
Note que las posiciones del gradiente son correspondientes al lienzo, no a las figuras que queremos afectar. El resultado es que si movemos los rectángulos dibujados al final de la función hacia una nueva posición, el gradiente para esos triángulos cambiará. 
Hágalo usted mismo: El gradiente radial es similar al de CSS3. Intente reemplazar el gradiente lineal en el Código 7-5 por un gradiente radial usando una expresión como createRadialGradient(0,0,30,0,0,300). También puede experimentar moviendo los rectángulos de posición para ver cómo el gradiente es aplicado a estas figuras.

  • Creando trazados

Los métodos estudiados hasta el momento dibujan directamente en el lienzo, pero ese no es siempre el caso. Normalmente tendremos que procesar figuras en segundo plano y una vez que el trabajo esté hecho enviar el resultado al contexto para que sea dibujado. Con este propósito, API Canvas introduce varios métodos con los que podremos generar trazados. 
Un trazado es como un mapa a ser seguido por el lápiz. Una vez declarado, el trazado será enviado al contexto y dibujado de forma permanente en el lienzo. El trazado puede incluir diferentes tipos de líneas, como líneas rectas, arcos, rectángulos, entre otros, para crear figuras complejas.
Existen dos métodos para comenzar y cerrar el trazado: 
    • beginPath() :Este método comienza la descripción de una nueva figura. Es llamado en primer lugar, antes de comenzar a crear el trazado.
    • closePath() :Este método cierra el trazado generando una línea recta desde el último punto hasta el punto de origen. Puede ser ignorado cuando utilizamos el método fill() para dibujar el trazado en el lienzo. También contamos con tres métodos para dibujar el trazado en el lienzo:
    • stroke() :Este método dibuja el trazado como una figura vacía (solo el contorno).
    • fill() :Este método dibuja el trazado como una figura sólida. Cuando usamos este método no necesitamos cerrar el trazado con closePath(), el trazado es automáticamente
    • cerrado con una línea recta trazada desde el punto final hasta el origen.
    • clip() :Este método declara una nueva área de corte para el contexto. Cuando el contexto es inicializado, el área de corte es el área completa ocupada por el lienzo. El método clip() cambiará el área de corte a una nueva forma creando de este modo una máscara. Todo lo que caiga fuera de esa máscara no será dibujado.


Código 7-6. Reglas básicas para trabajar con trazados.

function iniciar(){
var elemento=document.getElementById('lienzo');
lienzo=elemento.getContext('2d');
lienzo.beginPath();
// aquí va el trazado
lienzo.stroke();
}
window.addEventListener("load", iniciar, false);

El Código 7-6 no crea absolutamente nada, solo incorpora los métodos necesarios para iniciar y luego dibujar el trazado en pantalla. Para crear el trazado y la figura real que será enviada al contexto y dibujada en el lienzo, contamos con varios métodos disponibles:
  • moveTo(x, y) :Este método mueve el lápiz a una posición específica para continuar con el trazado. Nos permite comenzar o continuar el trazado desde diferentes puntos, evitando líneas continuas.
  • lineTo(x, y) :Este método genera una línea recta desde la posición actual del lápiz hasta la nueva declarada por los atributos x e y.
  • rect(x, y, ancho, alto) :Este método genera un rectángulo. A diferencia de los métodos estudiados anteriormente, éste generará un rectángulo que formará parte del trazado (no directamente dibujado en el lienzo). Los atributos tienen la misma función.
  • arc(x, y, radio, ángulo inicio, ángulo final, dirección) :Este método genera un arco o un círculo en la posición x e y, con un radio y desde un ángulo declarado por sus atributos.  El último valor es un valor booleano (falso o verdadero) para indicar la dirección a favor o en contra de las agujas del reloj.
  • quadraticCurveTo(cpx, cpy, x, y) :Este método genera una curva Bézier cuadrática desde la posición actual del lápiz hasta la posición declarada por los atributos x e y. Los atributos cpx y cpy indican el punto que dará forma a la curva.
  • bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) :Este método es similar al anterior pero agrega dos atributos más para generar una curva Bézier cúbica. Ahora disponemos de dos puntos para moldear la curva, declarados por los atributos cp1x, cp1y, cp2x y cp2y.

Veamos un trazado sencillo para entender cómo funcionan:

Código 7-7. Nuestro primer trazado.

function iniciar(){
var elemento=document.getElementById('lienzo');
lienzo=elemento.getContext('2d');
lienzo.beginPath();
lienzo.moveTo(100,100);
lienzo.lineTo(200,200);
lienzo.lineTo(100,200);
lienzo.stroke();
}
window.addEventListener("load", iniciar, false);

Recomendamos siempre establecer la posición inicial del lápiz inmediatamente después de iniciar el trazado con beginPath(). En el Código 7-7 el primer paso fue mover el lápiz a la posición 100,100 y luego generar una línea desde ese punto hasta el punto 200,200. Ahora la posición del lápiz es 200,200 y la siguiente línea será generada desde aquí hasta el punto 100,200. Finalmente, el trazado es dibujado en el lienzo como una forma vacía con el método stroke().
Si prueba el código en su navegador, verá un triángulo abierto en la pantalla. Este triángulo puede ser cerrado o incluso rellenado y transformado en una figura sólida usando diferentes métodos, como vemos en el siguiente ejemplo:

Código 7-8. Completando el triángulo.

function iniciar(){
var elemento=document.getElementById('lienzo');
lienzo=elemento.getContext('2d');
lienzo.beginPath();
lienzo.moveTo(100,100);
lienzo.lineTo(200,200);
lienzo.lineTo(100,200);
lienzo.closePath();
lienzo.stroke();
}
window.addEventListener("load", iniciar, false);



Espero haber ayudado en algo. Hasta la próxima oportunidad!








No hay comentarios:

Publicar un comentario en la entrada