En este tutorial aprenderemos a graficar un logo con jCanvas (plugin de jQuery) en el entorno <canvas> de HTML5.

¡Hola, amigos de DevCode! Hoy vamos ha aprender el uso de un plugin de jQuery, llamado jCanvas, que toma la filosofía de jQuery (escribir menos hacer mas), para realizar gráficos en el entorno  de HTML5. En esta ocasión graficamos el logo de DevCode.

Iniciamos agregando las librerías de JavaScript a Codepen.

El orden es importante, primero se tiene que agregar la librería de jQuery y luego la librería de jCanvas, tiene que estar en ese orden ya que la segunda es un plugin de jQuery.

En HTML creamos un elemento canvas con el ancho y alto de píxeles que posee el lienzo.

En CSS, añadimos al este elemento las propiedades display y margin para centrar el elemento en el navegador.

canvas {
  display: block;
  margin: 0 auto;
}

Para crear un círculo con jCanvas, primero seleccionamos el elemento, y con el método drawArc(), agregamos las propiedades como el radio, centro en x e y, y propiedades de estilos como strokeStyle para el color del trazo.

$('canvas').drawArc({
  strokeStyle: color,
  x: centrox, y: centroy,
  radius: radio,
});

Para crear el logo de DevCode utilizaremos 4 círculos por ello es que el código anterior lo agregamos en una función de nombre círculo.

function circulo(centrox, centroy, radio, color){}

Ahora agregamos los centros y los radios de estos 4 círculos.

var cenxs = 50; var cenys = 50;
var cenxi = 50; var cenyi = 320;
var cenxl = 240; var cenyl = 185;
var cenxp = 25; var cenyp = 185;

var rm = 50; var rM = 60; var rp = 18.5;

Y adicionalmente los colores verde y azul característicos del logo.

var verde = "#33D374"; var azul = "#108EFF";

Bien ahora graficamos los 4 círculos, utilizando como parámetros los valores inicializados anteriormente.

circulo(cenxs,cenys,rm,verde);
circulo(cenxi,cenyi,rm,azul);
circulo(cenxp,cenyp,rp,verde);
circulo(cenxl,cenyl,rM,verde);

Para graficar polígonos con jCanvas, seleccionamos el elemento, y con el método  drawPath() agregamos las propiedades que representan al color del trazo y los cuatro vértices del polígono  deseado. 

$('canvas').drawPath({
   strokeStyle: color,
   p1: {
     type: 'line',
     x1: x1, y1: y1,
     x2: x2, y2: y2,
     x3: x3, y3: y3,
     x4: x4, y4: y4,
     x5: x1, y5: y1,
   }
});

Este código también lo incluimos en una función para poder utilizarlo varias veces.

function poligono(x1, x2, x3, x4, y1, y2, y3, y4, color){}

Los vértices de estos polígonos se encuentran en las tangentes de los círculos, con un desfase de 35.4° (tener en cuenta que JavaScript trabaja en radianes). Por ello declaramos las constantes del número pi y de esta inclinación.

const p = Math.PI; const inc = 35.4/180*p; 

En la función tangentes calculamos los puntos del polígono que unirán a dos círculos, Nos apoyaremos en operaciones matemáticas de seno y coseno para determinar estos 4 puntos.

function tangentes(cenx1, ceny1, r1, cenx2, ceny2, r2, offset, color) {
    let x1t = cenx1+r1*Math.cos(p/2+offset);
    let y1t = ceny1+r1*Math.sin(p/2+offset);
    let x2t = cenx2+r2*Math.cos(p/2+offset);
    let y2t = ceny2+r2*Math.sin(p/2+offset);
    let x3t = cenx2+r2*Math.cos(3*p/2+offset);
    let y3t = ceny2+r2*Math.sin(3*p/2+offset);
    let x4t = cenx1+r1*Math.cos(3*p/2+offset);
    let y4t = ceny1+r1*Math.sin(3*p/2+offset); 
    poligono(x1t, x2t, x3t, x4t, y1t, y2t, y3t, y4t, color);
}

Ahora se grafica los dos polígonos que unirán el círculo lateral con los círculos inferior y superior.

tangentes(cenxi,cenyi,rm,cenxl,cenyl,rM,-inc,azul);
tangentes(cenxs,cenys,rm,cenxl,cenyl,rM,inc,verde);

Ahora cambiamos las propiedades strokeStyle que solo grafica los contornos, por la propiedad fillStyle que pinta todo la forma.

fillStyle: color

Recordar que canvas gráfica en orden, por ello el círculo lateral lo graficamos después de los rectángulos.

circulo(cenxs,cenys,rm,verde);
circulo(cenxi,cenyi,rm,azul);
circulo(cenxp,cenyp,rp,verde);
tangentes(cenxi,cenyi,rm,cenxl,cenyl,rM,-inc,azul);
tangentes(cenxs,cenys,rm,cenxl,cenyl,rM,inc,verde);
circulo(cenxl,cenyl,rM,verde);

¡Ya tenemos nuestro logo listo! Si deseas aprender mas de programación, recuerda que en Devcode tenemos el Curso de jQuery y el Curso de API’s de HTML5 esperando por ti, además de encontrar muchos otros cursos que complementarán tu aprendizaje. No olvides compartir el tutorial con tus amigos y dejarnos tus dudas u opiniones en la caja de comentarios.