Calculadora de Hipotenusa: HTML, JavaScript, Canvas

903 uemej2022

Abrir no Editor Video Publique Seu Código

Calculadora de Hipotenusa: HTML, JavaScript, Canvas

Recomendado

25 November 2025

Exemplo de camadas de animação CSS

16 April 2025

<!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

Liga de foguete

Exemplo de camadas de animação CSS

Um Código de Metehan

HTML

CSS

JS

Recomendado

Liga de foguete

Exemplo de camadas de animação CSS

Um Código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS