Skip to content

Instantly share code, notes, and snippets.

Created Jul 17, 2019
What would you like to do?
Rombo en JavaScript con Canvas
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Rombo con canvas</title>
<h1>Rombo con canvas y JavaScript</h1>
<a href="//">By Parzibyte</a>
<canvas id="canvas"></canvas>
<script src="script.js"></script>
* Ejercicios con Canvas y JavaScript: dibujo de figuras geométricas
const ALTURA_CANVAS = 200,
// 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 = "#C2185B";
// Comenzamos la ruta de dibujo, o path
// Nos movemos a la "punta" superior
contexto.moveTo(55, 5);
// Dibujamos la línea que va hacia la derecha
contexto.lineTo(105, 55);
// Ahora la que va hacia abajo
contexto.lineTo(55, 105);
// Ahora la que va hacia la izquierda
contexto.lineTo(5, 55);
// Y dejamos que la última línea la dibuje JS
// Hacemos que se dibuje
// Lo rellenamos
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment