En este sencillo ejercicio te mostraré cómo dibujar lineas con canvas, además verás los diferentes tipos de cubiertas o "tapas" de lineas.
Empezaremos con la estructura básica de un documento html el cual lo nombraremos ejemplo.html (qué original :D ), y dentro de la etiqueta <body> colocaremos una etiqueta canvas, le daremos un id para luego obtener ese elemento con javascript, y así luego dibujar las lineas.
<!DOCTYPE HTML>
<html>
<head>
<title>Ejemplo 1. Dibujar lineas</title>
</head>
<body>
<canvas id="lienzo" width="600" height="400" style="border-width:1px;
border-style:solid; border-color:black;">
</canvas>
</body>
</html>
Ahora bien, empieza la parte de javascript, antes que nada asegúrate de hacer referencia a tu script despues de haber cargado la página, o mejor aún dibuja las lineas dentro de una función al cargar la "página" con window.onload. Esto lo agregarás dentro de las etiquetas <head></head> , no es del todo obligatorio pero es recomendable :).
window.onload = function(){
//obtienes el elemento canvas por su Id
var canvas = document.getElementById("lienzo");
//obtienes el contexto
var contexto = canvas.getContext("2d");
contexto.moveTo(50, 10);
// lineTo dibuja una recta hasta las coordenadas que se le indique (X,Y)
// es importante primero haber ubicado el origen con la sentencia anterior moveTo
contexto.lineTo(50, 200);
// a pesar que la recta se "dibuje" no será visible a menos que uses el método stroke
contexto.stroke();
};
Ahora bien también puedes indicar el color de la línea, el ancho y el tipo de "cubierta" ( a tope, redondo, y cuadrado.) . Así que coloca estas lineas de código antes de llamar al método stroke()
// ancho de 10 pixeles
contexto.lineWidth = 10;
// color
contexto.strokeStyle = "green";
//y para la cubierta o tapa de la linea
contexto.lineCap="round";
Como habrás notado la línea dibujada con una cubierta (la cubierta por defecto es butt) round es un poco más larga de lo normal, eso es por este tipo de cubierta y "square" agregan el ancho de la línea (10px) a la longitud de la linea (5px al principio y 5px al final).
Bueno espero espero haber sido claro :D juega con las coordenadas e intenta dibujar algo con más lineas y colores, suerte !!
