Hoy vamos a ver cómo dibujar un triángulo en un canvas de HTML5 a través de JavaScript usando los métodos moveTo
, lineTo
y closePath
.
Aunque no hay un método llamado triangle
o algo por el estilo, podemos dibujar cualquier tipo de triángulo uniendo algunas líneas.
Para cambiar el color del borde podemos cambiar la propiedad strokeStyle
, y para el color de relleno la propiedad fillStyle
.
El grosor de la línea se define estableciendo la propiedad lineWidth
.
Comenzamos moviéndonos con moveTo
, y después simplemente usamos lineTo
para dibujar líneas hacia otro punto.
La última línea no la dibujamos nosotros, simplemente llamamos a closePath
para que el trazo sea cerrado por nosotros.
Veamos a continuación el código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Triángulo con canvas</title>
</head>
<body>
<h1>Triángulo con canvas y 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: dibujo de figuras geométricas
*
* 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");
// Estilo de dibujo
// Grosor de línea
contexto.lineWidth = 5;
// Color de línea
contexto.strokeStyle = "#212121";
// Color de relleno
contexto.fillStyle = "#AB47BC";
// Nos movemos a la esquina superior izquierda
contexto.moveTo(5, 5);
// Dibujamos una línea hacia abajo
contexto.lineTo(5, 100);
// Desde el fin de esa línea,
// dibujamos una hacia la derecha
contexto.lineTo(150, 100);
// Y dejamos que JS cierre nuestro dibujo
contexto.closePath();
// Hacemos que se dibuje
contexto.stroke();
// Lo rellenamos
contexto.fill();
Fíjate en los comentarios, los he puesto para explicar a fondo el código.
En este post te quiero compartir un código de C++ para listar y cancelar trabajos…
Gracias a WebAssembly podemos ejecutar código de otros lenguajes de programación desde el navegador web…
Revisando y buscando maneras de imprimir un PDF desde la línea de comandos me encontré…
Esta semana estuve recreando la API del plugin para impresoras térmicas en Android (HTTP a…
Hoy te enseñaré a extraer la cadena base64 de una clave PEM usando una función…
Encender un foco con un Bot de Telegram es posible usando una tarjeta como la…
Esta web usa cookies.