HTML proporciona un elemento muy interesante conocido como <canvas> , es solo un contenedor que se utiliza para dibujar gráficos en páginas web, el resto del trabajo se realiza con JavaScript.
Hay varios métodos en JavaScript para dibujar formas en el lienzo. En este artículo, veremos cómo podemos dibujar una línea en un lienzo y los métodos esenciales que se utilizan para dibujar una línea recta.
Existen los siguientes métodos para dibujar una línea recta en el lienzo.
-
beginPath() : Este método se utiliza para comenzar el camino que vamos a dibujar. No necesita ningún argumento.
-
moveTo(): este método toma dos argumentos que serán el punto de partida de cualquier ruta. El método comenzará la forma desde ese punto en particular. Más tarde podemos cambiar el punto de partida cambiando los valores de sus argumentos.
Ejemplo:
moveTo(10 , 30);
-
lineTo(): este método también tomará dos valores y agregará el punto de partida a los puntos que contiene. El código representa un camino de un punto a otro punto.
Ejemplo:
moveTo(10 , 30); lineTo(40 , 100);
-
stroke(): este método trazará la ruta dada y la hará visible, este método no toma ningún argumento.
Se requerirán todos los métodos que se enumeran arriba para dibujar una línea en el lienzo. Tenga en cuenta que estos son solo algunos métodos que se utilizarán para dibujar líneas, pero hay varios otros métodos disponibles en JavaScript para trabajar con lienzo.
Ejemplo: ahora cree un archivo HTML y agregue el siguiente código para dibujar una línea recta en el lienzo.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
</head>
<body>
<!-- Create a canvas giving its size -->
<canvas id="canvas1" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById('canvas1');
// Use the if condition in case any browser
// does not support canvas
if (canvas.getContext) {
var context = canvas.getContext('2d');
// Begin the path
context.beginPath();
// Starting point
context.moveTo(5, 52);
// End point
context.lineTo(325, 55);
// Stroke will make the line visible
context.stroke();
}
</script>
</body>
</html>
Producción:
producción
Cuando trabajamos con lienzo, tenemos que dar el tamaño para que podamos dibujar formas dentro de él. Tenga en cuenta que si los valores de las formas superan el límite del lienzo, la forma se limitará a ese borde y no podrá pasar, aunque no dará ningún error. Así es como podemos dibujar líneas en el lienzo.