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:
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
var canvas = document.getElementById("micanvas");
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:
ctx.moveTo(10,10);
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:
ctx.strokeStyle = "#f00";
ctx.stroke();
Ahora sí que ya tendremos la línea dibujada sobre nuestro CANVAS con HTML5.
