En este post te voy a enseñar a dibujar líneas (de diferente color) en un elemento canvas de HTML usando los métodos moveTo y lineTo, además de cambiar el grosor de las mismas.
Todo esto lo haremos con JavaScript y el elemento canvas de HTML.
Funciones moveTo y lineTo
La función moveTo indica el punto de comienzo de un trazo, en este caso indica el inicio de la línea.
Su sintaxis es:
contexto.moveTo(x, y)
En donde x e y son coordenadas.
Por otro lado, la función lineTo, dibuja una línea hasta determinadas coordenadas; en otras palabras indica el final de la línea.
Su sintaxis es:
contexto.lineTo(x, y)
En donde x e y son las coordenadas de fin.
Ejemplo de líneas con JavaScript
Veamos un ejemplo. Para trabajar con Canvas desde JavaScript hay que declarar el elemento <canvas> (o crearlo y adjuntarlo, pero eso es otra historia) en HTML y después obtener una referencia al mismo usando getElementById o querySelector.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Líneas en Canvas</title>
</head>
<body>
<h1>Líneas en Canvas usando JavaScript</h1>
<a href="https://parzibyte.me/blog/">By Parzibyte</a>
<br>
<canvas id="canvas"></canvas>
<script src="script.js"></script>
</body>
</html>
/**
* Ejercicios con Canvas y JavaScript: líneas
*
* https://parzibyte.me/blog/
*/
const ALTURA_CANVAS = 200,
ANCHURA_CANVAS = 400;
// Obtener el elemento del DOM
const canvas = document.querySelector("#canvas");
canvas.width = ANCHURA_CANVAS;
canvas.height = ALTURA_CANVAS;
// Del canvas, obtener el contexto para poder dibujar
const contexto = canvas.getContext("2d");
// Comenzar
contexto.beginPath();
// Grosor de línea
contexto.lineWidth = 3;
// Color de línea
contexto.strokeStyle = "blue";
// Comenzamos en 0, 0
contexto.moveTo(0, 0);
// Hacemos una línea hasta 48, 48
contexto.lineTo(48, 48);
contexto.stroke(); // "Guardar" cambios
// Otra línea
contexto.beginPath();
contexto.strokeStyle = "red";
contexto.moveTo(100, 0);
contexto.lineTo(52, 48);
contexto.stroke();
// Otra línea
contexto.beginPath();
contexto.strokeStyle = "yellow";
contexto.moveTo(0, 100);
contexto.lineTo(48, 52);
contexto.stroke();
// Otra línea
contexto.beginPath();
contexto.strokeStyle = "green";
contexto.moveTo(100, 100);
contexto.lineTo(52, 52);
contexto.stroke();
Cuando tenemos al elemento del DOM, obtenemos el contexto con getContext("2d") y sobre él ya podemos dibujar.
Finalmente, para dibujar todo o trazar todo, llamamos al método stroke.
El resultado se ve así:
Colores y grosor
Los colores se controlan a través de strokeStyle, se puede poner un color rgb, el nombre del color, o su valor hexadecimal.
El grosor de la línea se define con contexto.lineWidth
Finalmente, recuerda llamar a beginPath y stroke cada que traces una línea, si no, los colores y estilos pueden mezclarse.