Líneas

Crear líneas.

Mediante coordenadas X y Y , como ya sabemos la posición 0,0 del canvas esta situada en la esquina superior izquierda.

moveTo(x, y);

Mueve el puntero sin dibujar hasta la coordenada indicada en X y Y .

lineTo(x, y);

Crea una línea desde el punto marcado en moveTo(x, y); hasta la referencia indicada en el lineTo(x, y);

beginPath();

Inicializa un trazo se ha de indicar antes de procedera a crear un trazo. Se ha de cerrar con stroke();

stroke();

Cierra la inicialización creada por beginPath(); . Todo lo que se encuentre entre medio será el trazo.

strockeStyle = "Yellow";

Definirá el color de la línea.

lineWidth = 25;

Definirá el grosor de la línea.

Ejemplos:

            // Estilos
            ctx.lineWidth = 25;
            ctx.strokeStyle = "Yellow";

            // Iniciar el trazo
            ctx.beginPath();
            ctx.moveTo(50, 50);
            ctx.lineTo(450, 50);
            ctx.stroke();

Para generar dos líneas, se deberá inicializar por cada línea un conjunto de beginPath y stroke.

Ejemplo 2 líneas:

            // Estilos
            ctx.lineWidth = 25;
            ctx.strokeStyle = "Yellow";

            // Iniciar el trazo
            ctx.beginPath();
            ctx.moveTo(50, 50);
            ctx.lineTo(450, 50);
            ctx.lineTo(460, 100);
            ctx.lineTo(450, 160);
            ctx.stroke();

            // Iniciar el trazo
            ctx.beginPath();
            ctx.moveTo(50, 300);
            ctx.lineTo(450, 200);
            ctx.lineTo(450, 250);
            ctx.lineTo(450, 290);
            ctx.stroke();

lineCap = "valor";

Determina la terminación de la línea y tenemos 3 opciones:

• round (redonda)
• square (cuadrada) por defecto.
• butt (sin terminación)

lineJoin = "valor";

Determina las esquinas y tenemos 3 opciones:

• round (redondo)
• bevel (viselado)
• miter (con punta) por defecto.