Dibujar líneas en Canvas con HTML5

04/Jun/2012 HTML5 , , 4 Comentarios

Una de las cosas más sencillas que podemos hacer con un elemento CANVAS en HTML5 es la de trazar líneas. Veamos qué métodos y cómo debemos de proceder para poder dibujar líneas en un CANVAS de HTML5.

Lo primero de nuestro código será el insertar el CANVAS en nuestra página web:

  1. <canvas height="300px" width="300px" id="micanvas">
  2. Su navegador no soporta en elemento CANVAS
  3. </canvas>

Es importante el atributo ID que le demos al CANVAS ya que será a través del cual cogeremos la referencia y empezaremos a manipular su contenido.

El siguiente paso será obtener la referencia al contexto del CANVAS. Para ello accedemos al elemento HTML5 mediante el método .getElementById. El contexto, en este caso el 2D, lo obtenemos mediante el método .getContext

  1. var canvas = document.getElementById("micanvas");
  2. var ctx = canvas.getContext("2d");

Una vez que hemos obtenido la referencia al CANVAS hay que ver como movernos por él. El CANVAS está compuesto por una cuadricula de puntos. Por lo cual para dibujar una línea lo que tendremos que hacer es movernos a un punto, el que sea inicio de nuestra línea y luego trazar la línea hasta otro punto.

Para poder hacer estas dos acciones deberemos de conocer dos métodos. El primero el .moveTo(), el cual nos permite movernos a unas coordenadas (x,y) y el segundo es .lineTo(), el cual nos permite dibujar una línea desde el punto en el que nos encontremos hasta unas nuevas coordenadas (x,y).

Así, el código para dibujar una línea sobre el CANVAS será el siguiente:

  1. ctx.moveTo(10,10);
  2. ctx.lineTo(180,180);

Podríamos pensar que nuestro código ya ha resuelto el problema de dibujar una línea. Pero nada más cercano a la realidad. Y es que el hecho de trazar la línea no significa que esta se plasme sobre el CANVAS. Puedes comprobarlo escribiendo las líneas de código que llevamos hasta el momento.

La cuestión es que lo siguiente a realizar es el indicar el color de las líneas y ejecutar su pintado. Aquí recurriremos a una propiedad y un método. La propiedad será .strokeStyle, la cual permite indicar el color RGB que le daremos a nuestra línea. El método será .stroke(), el cual plasmará el trazo que hemos hecho sobre el CANVAS.

El código será el siguiente:

  1. ctx.strokeStyle = "#f00";
  2. ctx.stroke();

Ahora sí que ya tendremos la línea dibujada sobre nuestro CANVAS con HTML5.

Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

4 comentarios en “Dibujar líneas en Canvas con HTML5”

Víctor Cuervo

ANDRES CARVAJAL

Hoy intenté descargar el código y no funciona el link. Buen día.

Víctor Cuervo

Víctor Cuervo

@Andres Carvajal,

Gracias por el aviso. Estamos migrando el código a GitHub y fallan algunos enlaces. Puedes descargártelo desde https://github.com/victorcuervo/lineadecodigo/blob/master/lineadecodigo_html5/Canvas/dibujar-linea.html

Saludos.

Víctor Cuervo

Víctor Cuervo

@Javier,

El soporte de HTML5 ya está muy extendido en los nuevos navegadores. De todas maneras, si vas a realizar un proyecto y sabes los navegadores que utilizan tus usuarios puedes basarte en http://caniuse.com/ para ver si la funcionalidad que quieres utilizar esta soportada o no.

Por otro lado tienes librerías como Modernizr que te sirven para testear online si se soportan elementos como en Canvas. Dichas librerías ofrecen alternativas para los navegadores antiguos. Puedes ver un ejemplo en http://lineadecodigo.com/javascript/como-utilizar-un-polyfill-con-modernizr/

Saludos.

Víctor Cuervo

Javier

HTML 5 pinta muy, pero que muy bien… ojalá no tarde mucho en ser soportado por todos los navegadores, pero lo que es a día de hoy creo que no me arriesgo 🙁

Los comentarios están cerrados.