Calculadora de hipotenusa: HTML, JavaScript, Canvas

266 uemej2022

Abrir en el editor Publica tu código

Calculadora de hipotenusa: HTML, JavaScript, Canvas

Recomendado

28 May 2025

Entradas de un solo dígito con un elemento

HTML

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Simulador de la Hipotenusa</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 20px;
  }
  h1 {
    text-align: center;
  }
  #inputs {
    display: flex;
    flex-direction: column;
    max-width: 300px;
    margin: auto;
  }
  label {
    margin-top: 10px;
  }
  input {
    padding: 5px;
    font-size: 1em;
  }
  button {
    margin-top: 15px;
    padding: 10px;
    font-size: 1em;
    cursor: pointer;
  }
  #resultado {
    margin-top: 20px;
    text-align: center;
    font-size: 1.2em;
  }
  canvas {
    display: block;
    margin: 20px auto;
    border: 1px solid #ccc;
  }
</style>
</head>
<body>

<h1>Simulador de la Hipotenusa</h1>

<div id="inputs">
  <label>Ingrese cateto a:
    <input type="number" id="catetoA" min="0" />
  </label>
  <label>Ingrese cateto b:
    <input type="number" id="catetoB" min="0" />
  </label>
  <button onclick="calcularHipotenusa()">Calcular Hipotenusa</button>
  <button onclick="calcularCatetoA()">Calcular Cateto a</button>
  <button onclick="calcularCatetoB()">Calcular Cateto b</button>
</div>

function limpiarCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
}

function dibujarTriangulo(catetoA, catetoB, hipotenusa) {
  limpiarCanvas();

// Escala para que el triángulo quepa en el canvas
  const maxDim = Math.max(catetoA, catetoB, hipotenusa);
  const scale = 300 / maxDim; // 300 es un tamaño máximo en px

const a = catetoA * scale;
  const b = catetoB * scale;

// Coordenadas del triángulo
  ctx.beginPath();
  ctx.moveTo(50, 350); // punto A (origen)
  ctx.lineTo(50, 350 - b); // cateto B (vertical)
  ctx.lineTo(50 + a, 350); // cateto A (horizontal)
  ctx.closePath();

ctx.strokeStyle = 'blue';
  ctx.lineWidth = 2;
  ctx.stroke();

// Hipotenusa (línea diagonal)
  ctx.beginPath();
  ctx.moveTo(50, 350 - b);
  ctx.lineTo(50 + a, 350);
  ctx.strokeStyle = 'red';
  ctx.stroke();

// Etiquetas
  ctx.font = '14px Arial';
  ctx.fillStyle = 'black';

ctx.fillText(`a = ${catetoA}`, 50 + a/2, 370);
  ctx.fillText(`b = ${catetoB}`, 20, 350 - b/2);
  ctx.fillText(`c = ${hipotenusa.toFixed(2)}`, (50 + a/2), (350 - b/2));
}

</body>
</html>

Calculadora de hipotenusa: HTML, JavaScript, Canvas

Recomendado

Apertura de pergamino

Un código de Metehan

Entradas de un solo dígito con un elemento

HTML

CSS

JS

Recomendado

Apertura de pergamino

Un código de Metehan

Entradas de un solo dígito con un elemento

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS