En muchos lenguajes de programación el objeto canvas se utiliza para crear un área de dibujo para trazar primitivas, colocar imágenes o cualquier otra manipulación gráfica. En esta ocasión, veremos como crear este objeto en JavaScript, dibujar algunos elementos y trazar algunas primitivas algo muy útil para realizare gráficos estadísticos, videojuegos y otro tipo de aplicaciones ¡Manos a la obra!
Tabla de Contenido
Preparemos todo el escenario para el canvas
En un documento HTML cualquiera, colocamos un objeto canvas al cual le ponemos un id y un class. También, haremos que nuestro canvas sea de 480 x 480 píxeles.
<canvas id="micanvas" width="480" height="480" class="cuadro"></canvas>
Dentro del <head> de nuestro documento colocamos una etiqueta <style>
<style></style>
Dentro de ese estilo colocamos algunos valores css mínimos. De esta manera aseguramos que cada canvas que usemos tenga un conjunto mínimo de propiedades.
.cuadro{
display: block;
border: 1px solid #333;
margin: 5% auto;
}
Lo que nos deja con un objeto así.
Por último, colocamos antes del </body> la correspondiente llamada al archivo javascript con el que vamos a trabajar.
<script type="text/javascript" src="canvas.js"></script>
¿Cómo funciona el canvas HTML?
El punto de origen se encuentra en la esquina superior izquierda (0,0), cada punto del canvas equivale a un píxel, así que no será difícil trabajar con ello. Al colocar elementos, estos son relativos a su punto de origen.Tal y como lo muestra la imagen.
Preparando el canvas en JavaScript
Es hora de crear el archivo javascript que mencionamos antes. Necesitamos una variable que obtenga el id del canvas, ya que de esta manera podemos manejar a gusto sus propiedades y métodos.
let can = document.getElementById("micanvas");
También necesitamos obtener el contexto, que no es otra cosa que un objeto que nos permita manipular el contenido dentro del canvas. En este caso, nos enfocaremos únicamente en utilizar primitivas 2d.
let con = can.getContext("2d");
Ahora que ya tenemos todo listo ¡Es hora de dibujar primitivas!
Dibujando líneas rectas en el canvas
Para dibujar un objeto cualquiera, desde una línea recta hasta un triángulo, necesitamos crear lo que se conoce como un path, este es el camino que va a seguir nuestro objeto y nos permitirá trazar objetos, crear línea curvas, usar curvas bezier, unir objetos, etc. Lo creamos en base a nuestro contexto con el método beginPath.
con.beginPath();
A continuación, movemos el punto de dibujo hacia el punto donde vamos a iniciar la líea. Por ejemplo, en este ejemplo, lo moveremos al punto (10,10) con el método moveTo.
con.moveTo(10, 10);
Con el método lineTo, nos aseguramos de que la línea sea vertical al mover el final de la misma hacia el punto (10,470)
con.lineTo(10, 470);
También podemos con el método strokeStyle cambiar el color de la línea. Este método recibe un string con el color en formato hexadecimal, RGB o HSL.
con.strokeStyle = "#039";
Por último, podemos aumentar el grosor de la línea con el método lineWidth, por ejemplo:
con.lineWidth = 5;
Ahora que terminamos de establecer los parámetros de nuestra línea, nos aseguramos de que aparezca en el canvas con el método stroke.
con.stroke();
Este es nuestro resultado.
Dibujando una curva bezier en el canvas
Una curva bezier es un elemento común en el diseño CAD y el dibujo técnico. En JavaScript podemos dibujarlas gracias al objeto canvas. Para dibujarlas se necesitan las coordenadas (X,Y) de:
- Un punto de partida
- Un punto de control
- Un segundo punto de control
- un punto final
Para hacerla, utilizaremos el método bezierCurveTo. Aunque este método no cuenta con un punto inicial, no será problema ya que contamos con el método moveTo que usamos previamente. Entonces, iniciamos el path:
con.beginPath();
Nos movemos al punto (20,20) para que no este tan pegada a la línea recta.
con.moveTo(20,20);
Trazamos la curva bezier. El primer par de números son el punto de control primario, el segundo par corresponde al punto de control secundario y el último par son del punto final.
con.bezierCurveTo(50,120,40,80,200,200);
Cambiamos el color de la línea a rojo.
con.strokeStyle = "#F00";
Hacemos más delgada la línea.
con.lineWidth = 2;
Y finalmente, cerramos el path.
con.stroke();
Este es ahora nuestro resultado.
Podemos observar en esta imagen, los puntos definidos para la curva bezier y su línea de apoyo creada por los puntos auxiliares.
Dibujando cuadrados o rectángulos en el canvas
Dibujar cuadrados o rectángulos es muy fácil. En este caso, no necesitamos definir un punto inicial antes de comenzar ya que el método rect lo necesita desde el principio. Estos son sus parámetros:
- Coordenada X: El valor para la coordenada en X
- Coordenada Y: El valor para la coordenada en Y
- Widh: Ancho en píxeles.
- Height: Alto en píxeles.
Iniciamos el path otra vez.
con.beginPath();
Comencemos dibujando un pequeño cuadrado de 100x100en el punto (200,200).
con.rect(200,200,100,100);
Hagamos la línea de color negro.
con.strokeStyle = "#000";
Aumentamos su grosor nuevamente.
con.lineWidth = 5;
Elegimos un color de relleno para nuestro cuadrado con el método fillStyle que acepta colores en diferentes formaos igual que strokeStyle.
con.fillStyle = "yellow";
Aplicamos ese relleno con el método fill y ceramos el path.
con.fill();
con.stroke();
Así queda nuestro resultado.
Haciendo círculo en el canvas
Para dibujar un círculo, utilizaremos el método arc, el cual incluso nos sirve para crear semi-círculos o arcos. Este método requiere los siguientes parámetros:
- Coordenada X: El valor de X
- Coordenada Y: El valor de Y
- Radio: El radio del círculo
- Ángulo inicial: Recomendable que sea 0 para un círculo completo
- Ángulo final. Recomendable que sea 2*PI para un círculo completo
Entonces, iniciamos el path.
con.beginPath();
Trazamos un círculo de 50 píxeles de radio en la posición (200,300)
con.arc(200,300,50,0,2*Math.PI);
Cambiamos algunas de sus propiedades como color de relleno, color de línea y grosor de la misma. También aplicamos el color de relleno y cerramos el path.
con.strokeStyle = "#008F39";
con.lineWidth = 10;
con.fillStyle = "BDECB6";
con.fill();
con.stroke();
Y este es nuestro resultado.
Trazando triángulos en el canvas
Trazar un triángulo requiere de 3 líneas unidas en nuestro Path, ya que el objeto canvas no tiene una primitiva específica para ello. Necesitamos establecer nuestro punto de inicio, 2 líneas para formar el ángulo y una tercera que debe regresar al punto de origen para cerrar la figura. Por ejemplo:
// Iniciamos el path
con.beginPath();
// Establecemos nuestro punto de partida
con.moveTo(400,300);
// Trazamos la primera línea 50 píxeles más allá del punto de origen
con.lineTo(450,350);
// Trazamos la segunda línea regresando 50 píxeles en Y
con.lineTo(450,300);
//Volvemos al punto de origen para cerrar la figura
con.lineTo(400,300);
// Volvemos a la línea inicial delgada
con.lineWidth = 1;
// Cambiamos el color de la línea
con.strokeStyle = "blue";
// Aplicamos todo a la figura
con.fill();
con.stroke();
Este es el resultado.
Así podemos apreciar un poco mejor sus coordenadas.
Colocando texto en el canvas
Para colocar texto en el canvas, podemos usar los siguientes métodos que nos serán útiles:
- font: Nos permite definir la fuente, tamaño y estilo (negrita, cursiva, etc.)
- fillText: Permite colocar el texto, recibe 3 valores: el texto a colocar, el valor para X y el valor para Y
- textAlign: Permite definir la alineación del texto con los valores CSS clásicos
Por supuesto, con este elemento no es necesario definir un path.
Vamos a colocar un texto con fuente Antonio (La fuente debe estar en la lista de fuentes del sistema operativo) a tamaño 30.
con.font = "Antonio 30px";
Hacemos que el texto este centrado.
con.textAlign = "center";
Pintamos las letras de color naranja
con.fillStyle = "orange";
Colocamos el texto 430 píxeles en el eje Y, también obtenemos la mitad del canvas al dividir en ancho entre 2 y colocar eso en el eje X.
con.fillText("CableNaranja", can.width / 2, 430);
Este es el resultado.
Ejemplo práctico: Un gráfico de barras
Para demostrar la potencia de canvas, vamos a hacer un sencillo gráfico de barras. En este caso, necesitamos añadir a nuestro archivo HTML, un segundo objeto canvas al que pondremos como id la palabra “grafico”.
<canvas id="grafico" width="480" height="480" class="cuadro"></canvas>
En nuestro archivo JavaScript, comenzamos por instanciar el objeto y crear el contexto 2D.
let graf = document.getElementById("grafico");
let gcon = graf.getContext("2d");
Trazamos la línea vertical.
gcon.beginPath();
gcon.moveTo(10, 10);
gcon.lineTo(10, 410);
gcon.stroke();
Luego la horizontal.
gcon.beginPath();
gcon.moveTo(10, 410);
gcon.lineTo(410, 410);
gcon.stroke();
Ahora, dibujamos la primera barra del gráfico.
gcon.beginPath();
gcon.rect(20,210,100,200);
gcon.fillStyle = "yellow";
gcon.fill();
gcon.stroke();
Dibujamos la segunda barra.
gcon.beginPath();
gcon.rect(150,260,100,150);
gcon.fillStyle = "green";
gcon.fill();
gcon.stroke();
Añadimos una tercera barra.
gcon.beginPath();
gcon.rect(280,160,100,250);
gcon.fillStyle = "red";
gcon.fill();
gcon.stroke();
Nos aseguramos que todos los texto sean de tipo Arial, tamaño 10.
gcon.font = "10pt Arial";
gcon.fillStyle = "black";
Ahora, colocamos los títulos de cada barrra.
// Título de la primera barrra
gcon.fillText("Cebada (200)", 20, 200);
// Título de la segunda barrra
gcon.fillText("Trigo (150)", 150, 250);
//Título de la tercera barrra
gcon.fillText("Avena (250)", 280, 150);
Finalmente, colocamos el título del gráfico a tamaño 20 y con una fuente diferente.
gcon.font = "20pt Antonio";
gcon.textAlign = "center";
gcon.fillText("Gráfico de ejemplo", can.width / 2, 440);
Finalmente podemos observar el resultado.
¡Y eso es todo por hoy, amigos! Puedes probar el código en JSFiddle, editarlo o ajustarlo a tus necesidades ¿Te ha resultado? Déjanos saber en los comentarios aquí abajo, en nuestra cuenta de twitter @cablenaranja7 o en nuestra página de facebook.
Docente, IT Manager, Blogger & Developer. Escribo por diversión, educo por pasión. | Grandstanding is not my thing.
