0
266
Views¿Cómo se dibuja un cuadro de un cuadrado inscrito en un círculo con radio R?
¿Hay alguna manera de dibujar un cuadrado inscrito en un círculo, con las esquinas del cuadrado tangentes a la circunferencia del círculo y con un radio R? Debería verse algo como la imagen adjunta. Por supuesto, se supone que el rectángulo es cuadrado.
Esto es lo que tengo hasta ahora:
function draw() { const canvas = document.getElementById('circle'); if (canvas.getContext) { const ctx = canvas.getContext('2d'); const X = canvas.width / 2; const Y = canvas.height / 2; const R = 50; const angle = 45 * (Math.PI / 180); const G = Math.sin(angle) * R; ctx.beginPath(); ctx.arc(X, Y, R, 0, 2 * Math.PI, false); ctx.lineWidth = 2; ctx.strokeStyle = '#0000FF'; ctx.stroke(); } } canvas { position: absolute; height: 250px; width: 250px; top: 50%; left: 50%; transform: translate(-50%, -50%); } <body onload="draw()"> <div style="text-align:center;" , style="position: absolute"> <canvas id="circle" width="150" height="150"></canvas> </div> </body> 
·
Juan Pablo Isaza
2 answers
Answer question0
Un enfoque sería hacer que el círculo se ajuste a las dimensiones del lienzo, luego calcular en consecuencia, para obtener las variables para el círculo y el cuadrado. El lienzo es un cuadrado, así que no veo por qué necesitaríamos dos variables diferentes para la altura y el ancho. canvas.width = canvas.height para que podamos usar canvas.width para hacer todos los cálculos.
function draw() { const canvas = document.getElementById('circle'); if (canvas.getContext) { const ctx = canvas.getContext('2d'); // Circle const r = canvas.width/2, angle = 45*(Math.PI/180), g = Math.sin(angle)*r; drawCircle(canvas.width, r); function drawCircle(diameter, radius){ ctx.beginPath(); ctx.arc(diameter/2, diameter/2, radius, 0, 2 * Math.PI, false); ctx.lineWidth = 2; ctx.strokeStyle = '#0000FF'; ctx.stroke(); } // Square const squareWidth = Math.sqrt(2*r**2), startX = (canvas.width - squareWidth) / 2, startY = startX; drawSquare(startX, startY, squareWidth); function drawSquare(x, y, width){ ctx.beginPath(); ctx.rect(x, y, width, width) ctx.stroke(); } } } canvas { position: absolute; height: 150px; width: 150px; top: 50%; left: 50%; transform: translate(-50%, -50%); } <body onload="draw()"> <div style="text-align:center;" , style="position: absolute"> <canvas id="circle" width="150" height="150"></canvas> </div> </body>
·
Juan Pablo Isaza
Report
0
Agregue esto a su función de dibujo:
const cos45 = 0.7071; // squareSide = cos45 * R * 2; const halfOfSquareSide = cos45 * R; ctx.beginPath(); ctx.rect(X - halfOfSquareSide, Y - halfOfSquareSide, halfOfSquareSide * 2 , halfOfSquareSide * 2); ctx.lineWidth = 2; ctx.strokeStyle = '#FF0000'; ctx.stroke();
·
Juan Pablo Isaza
Report
Answer question