Dibujar líneas en canvas – JavaScript y HTML5

Dejar un comentario / HTML, javascript, web / Por

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="//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.

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *