[HTML5] Canvas I – Trazos y figuras

Hola, hace buen rato que no escribía nada sobre HTML5, así que con este post quiero retomar el tema, y la idea es con algunos post sobre como trabajar con el Canvas, así que vamos a comenzar definiendo el canvas con una superficie de dibujo, con el canvas podemos entre otras cosas:

· Dibujar líneas y figuras geométricas

· Trabajar con texto

· Trabajar con gradientes

· Trabajar con audio y video

· Realizar animaciones

· Realizar juegos

· Y mucho más…

Para iniciar, una definición muy simple del canvas puede ser una superficie de dibujo rectangular, y dicho rectángulo tiene unas coordenadas (x,y), la siguiente imagen ilustra este tema:

Ahora ya entrando en materia, para crear el canvas utilizamos la etiqueta <canvas>, un ejemplo sería:

   1:  <canvas id=”canvas1” style=”border: 1px Gray Solid height:400px; width:400px;”>

   2:         <p>Tu explorador no soporta el canvas… please update!</p>

   3:  </canvas>

Al canvas anterior le definimos un id (para luego accederlo utilizando JavaScript) y unas propiedades css, lo que esta dentro del canvas (en este caso un párrafo) solo se mostrará si el explorador no lo soporta.

Bueno y ahora si a trabajar con el canvas, en este post revisaremos como dibujar líneas y algunas figuras como rectángulos, círculos y arcos.

Lo primero que se debe hacer para cualquier tipo de acción con el canvas es obtener una referencia al elemento y luego definir su contexto:

   1:  var canvas = document.getElementById('canvas1');

   2:  var contexto = canvas.getContext('2d')

Las dos líneas anteriores simplemente primero obtienen una referencia al elemento y luego le definimos el contexto para trabajar, de acá en adelante usaremos el contexto para dibujar.

Ahora para dibujar líneas tenemos varias funciones, algunas de ellas son:

· moveTo(x,y): Nos ubica en la posición (x,y) dentro del canvas, aca no se dibuja nada.

· lineTo(x,y): Realiza una línea desde la posición actual hasta el punto (x,y).

· lineWidth: Específica el grosor de la línea.

· strokeStyle: Color de la línea, es posible especificarlo en formato hexadecimal, rgb(a) o por el nombre del color.

Y finalmente para que las líneas se dibujen debemos hacer un llamado a contexto.stroke(), de lo contrario no se pintará nada. Ahora si quisiéramos hacer algo como lo de la imagen:

Lo que podríamos hacer es:

   1:  //Obtener el elemento

   2:  var canvas = document.getElementById('canvas1');

   3:  //Definir contexto

   4:  var contexto = canvas.getContext('2d');

   5:   

   6:  var i;

   7:  for (i = 0; i <= 300; i += 30)

   8:  {

   9:      contexto.moveTo(i,0);

  10:      contexto.lineTo(i,300);

  11:      

  12:      contexto.moveTo(0,i);

  13:      contexto.lineTo(300,i);

  14:  }

  15:  contexto.strokeStyle = 'rgba(228,42,190,0.2)';

  16:  contexto.lineWidth = 2;

  17:  contexto.stroke();

Y ahora para dibujar un rectángulo:

   1:  contexto.fillRect(x0, y0, ancho, alto);

   2:  contexto.fillStyle = color;

Y si fuera un circulo:

   1:  contexto.arc(x, y, radio, anguloInicial, anguloFinal, false);

   2:  contexto.fillStyle = color de relleno;

   3:  contexto.fill();

   4:  contexto.lineWidth = ancho de línea;

   5:  contexto.strokeStyle = color;

   6:  contexto.stroke();

Espero les sea de utilidad este post, y pendientes porque vienen más post sobre el canvas, como siempre les dejo el código del ejemplo:

Descarga el ejemplo!