[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=”canvas1style=”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:

Imagen1

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!

You may also like...

5 Responses

  1. edwin says:

    muy bueno, sabrías donde puedo encontrar información para juegos,…gracias
    edwinygb@hotmail.com

  1. June 19, 2012

    […] [HTML5] Canvas I – Trazos y figuras […]

  2. June 19, 2012

    […] [HTML5] Canvas I – Trazos y figuras […]

  3. December 19, 2012

    […] [HTML5] Canvas I – Trazos y figuras […]

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Follow

Get every new post on this blog delivered to your Inbox.

Join other followers: