Calcolatrice dell'ipotenusa: HTML, JavaScript, Canvas

757 uemej2022

Apri nell'Editor Pubblica il Tuo Codice

Calcolatrice dell'ipotenusa: HTML, JavaScript, Canvas

Consigliato

25 April 2025

Calcolatrice delle tasse Robux

2 March 2025

HTML, Accedi Registrati animato

20 May 2025

Modulo di accesso Glassmorphism moderno in html, css

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>

Calcolatrice dell'ipotenusa: HTML, JavaScript, Canvas

Consigliato

Calcolatrice delle tasse Robux

HTML, Accedi Registrati animato

Modulo di accesso Glassmorphism moderno in html, css

HTML

CSS

JS

Consigliato

Calcolatrice delle tasse Robux

HTML, Accedi Registrati animato

Modulo di accesso Glassmorphism moderno in html, css

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS