javascript

Dibujar líneas en canvas – JavaScript y HTML5

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.

parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/