¡Por supuesto! Vamos a completar juntos el código HTML y JavaScript que necesitas. Te proporcionaré una versión completamente funcional del código que implementa las características que describiste:
1. Un círculo de radio 100 píxeles dentro de un canvas.
2. Un botón para escoger un punto aleatorio dentro del círculo, dibujarlo, y trazar la cuerda perpendicular que pasa por ese punto.
3. Otro botón para realizar la acción de escoger punto 100 veces y actualizar los valores acumulados.
4. Un botón para reiniciar todo y limpiar el canvas.
Código HTML con JavaScript Completo
<![CDATA[<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Círculo y Puntos</title>
<style>
canvas {
border: 1px solid black;
}
button {
margin: 5px;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<br>
<button id="escogePunto">Escoge un punto</button>
<button id="escoge100">Escoge 100 puntos</button>
<button id="reiniciar">Comenzar de nuevo</button>
<p>M: <span id="M">0</span>, Cuerdas: <span id="cuerdas">0</span>, P: <span id="P">0</span></p>
<script>
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let M = 0, cuerdas = 0;
function dibujarCirculo() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(200, 200, 100, 0, 2 * Math.PI);
ctx.stroke();
}
function escogePunto() {
let a = Math.random();
let b = Math.random() * 2 * Math.PI;
let x = a * Math.cos(b) * 100 + 200;
let y = a * Math.sin(b) * 100 + 200;
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(x, y, 2, 0, 2 * Math.PI);
ctx.fill();
let deltaX = Math.sqrt(1 - a*a) * Math.sin(b) * 100;
let deltaY = Math.sqrt(1 - a*a) * Math.cos(b) * 100;
let x1 = x - deltaX;
let y1 = y + deltaY;
let x2 = x + deltaX;
let y2 = y - deltaY;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
if (a < 0.5 * Math.sqrt(3)) {
M++;
}
cuerdas++;
actualizarValores();
}
function actualizarValores() {
document.getElementById('M').textContent = M;
document.getElementById('cuerdas').textContent = cuerdas;
document.getElementById('P').textContent = (cuerdas > 0) ? (M / cuerdas).toFixed(2) : 0;
}
document.getElementById('escogePunto').addEventListener('click', function() {
escogePunto();
});
document.getElementById('escoge100').addEventListener('click', function() {
for (let i = 0; i < 100; i++) {
escogePunto();
}
});
document.getElementById('reiniciar').addEventListener('click', function() {
M = 0;
cuerdas = 0;
actualizarValores();
dibujarCirculo();
});
dibujarCirculo();
</script>
</body>
</html>
]]>Explicación del Código
1.
Estilo CSS: El canvas tiene un borde para que sea visible. Los botones tienen un margen pequeño para no estar pegados entre sí.
2.
JavaScript:
⋅ dibujarCirculo(): Limpia el canvas y dibuja el círculo central.
⋅ escogePunto(): Calcula un punto aleatorio dentro del círculo y la cuerda correspondiente, dibujándolos en el canvas.
⋅ actualizarValores(): Actualiza los valores de M, cuerdas, y P en la página.
⋅ Los event listeners de los botones gestionan las acciones de cada uno al ser pulsados.
⋅ Al cargar la página, el círculo se dibuja inicialmente con dibujarCirculo().
Este código está listo para ser copiado en un archivo .html y abierto con un navegador. Te permitirá interactuar con los elementos descritos y observar cómo cambian las variables M, cuerdas, y P según las interacciones.
