3

decidì mejorar un poco un antiguo juego, y me encontrè este problema:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
let width=70,height=70;
let radio=(width+height)/Math.PI;
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.arc(30,30,radio,0,(Math.PI/180)*360,0);
ctx.strokeRect(30,30,width,height);
ctx.stroke();
</script>

</body>
</html>

El circulo no se dibuja en la misma posicion que el cuadrado.
Resultado esperado:
introducir la descripción de la imagen aquí
Y al momento de ver la coliciòn de un circulo con un cuadrado los calculos se me rompen.

2
  • Podrías poner un dibujo del resultado esperado?
    – Yussef
    Commented el 9 feb. 2023 a las 21:55
  • @Yussef listo. .
    – DABL03
    Commented el 9 feb. 2023 a las 21:58

3 respuestas 3

3

El cuadrado y el círculo no son concéntricos porque la función arc toma como posición el centro mientras que strokeRect la esquina superior izquierda.

Aprovechando para implementar funciones que dibujen a partir del centro queda así:

function cuadrado(center, size){
    halfSize = { x: size.x / 2, y: size.y / 2 }
    topLeftCorner = { x: center.x - halfSize.x, y: center.y - halfSize.y }
    ctx.strokeRect(topLeftCorner.x, topLeftCorner.y, size.x, size.y)
}

function circulo(center, radius){
    ctx.arc(center.x, center.y, radius, 0, Math.PI * 2)
}

var c = document.getElementById("myCanvas")
var ctx = c.getContext("2d")
let centro = { x: 50, y: 50 }
let tamaño = { x: 50, y: 50 }
let diámetro = Math.sqrt(tamaño.x * tamaño.x + tamaño.y * tamaño.y)

ctx.moveTo(0,0)
ctx.lineTo(200,100)
sqrt2 = Math.sqrt(2)
cuadrado(centro, tamaño)
circulo(centro, diámetro/2)
ctx.stroke()
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">Your browser does not support the HTML canvas tag.</canvas>

3

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="120" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
let width = 70, height = 70;
let dia = Math.sqrt( width * width + height * height );
ctx.arc( 30 + width/2, 30 + height/2,  dia/2, 0, (Math.PI/180) *360, 0 );
ctx.strokeRect( 30, 30, width, height );
ctx.stroke();
</script>

</body>
</html>

En dia, obtenemos el diámetro en base al teorema de Pitágoras, que nos devuelve la hipotenusa del triángulo formado por los lados del cuadrado.
Dado que para el dibujo del circulo, se toma como referencia su centro, ubicamos este sumandole la mitad del lado a la posición del cuadrado.

0
0

Solamente hice modificaciones los siguientes cálculos:

let radio = (width + height) / 3 + 4;

ctx.arc(65, 65, radio, 0, (Math.PI / 180) * 360, 0);

Y obtienes el resultado esperado, ejemplo:

var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
let width = 70, height = 70;
let radio = (width + height) / 3 + 4;
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.arc(65, 65, radio, 0, (Math.PI / 180) * 360, 0);
ctx.strokeRect(30, 30, width, height);
ctx.stroke();
<canvas id="myCanvas" width="200" height="120" style="border:1px solid #d3d3d3;">
  Your browser does not support the HTML canvas tag.
</canvas>

7
  • No lo analice correctamente porque me puse a estudiar otra cosa, disculpa. Debo multiplicar por 2 la posicion X y Y para que se centre en el cuadrado?
    – DABL03
    Commented el 9 feb. 2023 a las 22:08
  • No entendí por qué el + 4 en el radio
    – Pollo
    Commented el 9 feb. 2023 a las 22:11
  • @DanielBriceño exacto, eso mismo. Commented el 9 feb. 2023 a las 22:12
  • 1
    @Pollo es para aumentar la radio del círculo, mientras voy sumando, va aumentando, y así traté de adaptar que el ancho del radio sea exacto entre las esquinas del cuadrado. Commented el 9 feb. 2023 a las 22:14
  • 1
    O sea que lo ajustaste a ojo hasta que quedara bien? Digo, no está calculado por una fórmula para cualquier cuadrado, no?
    – Pollo
    Commented el 9 feb. 2023 a las 22:16

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.