[HTML5] Canvas I – Trazos y figuras

Posted on Actualizado enn


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!

About these ads

5 comentarios en “[HTML5] Canvas I – Trazos y figuras

    edwin escribió:
    06/16/2012 en 09:54

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

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

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

    Resumen Post 2012 « Todo en ASP.NET escribió:
    12/19/2012 en 22:05

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

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s