Día #13 Dibujemos formas básicas con canvas

En este primer acercamiento a canvas vimos como hacer funcionar la etiqueta canvas que es nueva en HTML5, en este tutorial veremos cómo avanzar un poco mas y lograr crear formas básicas con canvas.

Bueno, antes de comenzar debemos de saber algo de canvas en cuantos a las formas básicas, es que solo admite rectángulos de forma nativa, ahora esto no significa que no podemos crear otras formas, esto lo vamos a poder lograr combinando rutas por medio de funciones.

1 – Dibujar Rectángulos con canvas

Vamos a comenzar viendo cómo podemos hacer para crear rectángulos, que viene a ser lo más básico que podemos hacer con canvas.

Métodos simples con la cual vamos a crear rectángulos:

rectangulo-con-canvas

 

Los tres métodos toman cuatro argumentos (x,y,w,h) que son los desplazamientos desde la esquina superior del elemento, el ancho y alto, bueno en al cuadro anterior te explico cómo funcionan las coordenadas de desplazamiento y el lienzo del elementos en canvas.

Veamos un Ejemplo:

El resultado seria el siguiente cuadro:

rectangulo-con-canvas2

En resumen esto fue lo que hicimos:

1º – se crea un cuadro negro de 100*100px con la función FillRect
2º – se elimina un cuadro de 60*60px con la función ClearRect
3º – se crea un contorno rectangular de 50*50px con StrokeRect

2 – Trazar una línea con canvas

Una línea es el elemento más básico que podemos dibujar, ya sea en un papel o en HTML5 usando la nueva etiqueta canvas, vamos a ver cómo crear líneas con canvas.

Ahora veremos el resultado y su explicación.

lineas-con-canvas

cxt.moveTo(20,10);= Creamos un punto de partida para la línea en el punto (x,y) de acuerdo a las coordenadas partiendo del eje 0.

cxt.lineTo(130,100);= Creamos un punto de llegada para la línea en el punto (x,y) de acuerdo a las coordenadas partiendo del eje 0.

cxt.lineWidth = 7; =Establecemos un ancho para la línea de 7px.

cxt.strokeStyle = “blue”; = Asignamos un color a la línea, en este caso será azul.

cxt.stroke(); = hacemos que la línea sea visible con el color del trazo

3- Trazar o Dibujar una curva Bézier con canvas

Para crear curvas con líneas con canvas vamos a necesitar más parámetros en las funciones y utilizar más lógica matemática para saber dónde colocar los puntos para hacer las curvas. Veamos el siguiente codigo que nos crea una linea curva.

La función que realmente hay nueva y que tenemos que explicar es cxt.bezierCurveTo. Que es la que nos va a permitir crear este efecto Bézier.

curva-bezier-canvas

4 – Dibujar Circulos con canvas

Hay método en canvas que nos permite dibujar círculos y en su defecto arcos. Se trata de cxt.arc, vamos a ver cómo crear un circulo.

Veamos el siguiente codigo HTML:

El resultado seria el siguiente:

circulo-con-canvas

Explicacion:

cxt.fillStyle =”red”; = Creamos un tipo de relleno rojo al elemento que se creara.

cxt.beginPath(); = Sirve para empezar un recorrido, no se le añadió ningún parámetro.

cxt.arc(60,60,50,0,Math.PI*2,true); = Esta función es la más importante ya que nos crea un arco y nos sirve para hacer el circulo, y los parámetros son: 60 en su centro en X, 60 en su centro en Y, 50px radio en desde el centro, que es el punto que creamos con las coordenadas X, Y, luego empezamos un circulo desde 0 hasta el final del arco expresado en radianes por que no soporta grados, (1 vuelta completa de circulo es igual a 2 PI Radianes), y sacamos a PI de la librería Math, entonces obtenemos Math.PI*2 y por ultimo true para decir que queremos ver la parte positiva del arco es decir se hace el recorrido de acuerdo a como giran las manecillas del reloj.

cxt.closePath(); = Cerramos el recorrido.

cxt.fill(); = Rellenamos el recorrido

y asi obtenemos un circulo sencillo con canvas.

 

———————————–

Como debes de saber, hay muchas cosas para crear con canvas, esto solo es lo mas básico que hay, pero durante poco tiempo seguiremos avanzando.

para mas información acecar de Canvas ve a esta web: http://www.html5canvastutorials.com/

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo