<html> <body> <canvas width = "1200" height = "1200"> </canvas> <script> let canvas = document.querySelector('canvas'); let context = canvas.getContext('2d'); context.fillStyle = '#5bd75b'; context.fillRect(0, 0, 1200, 1200); let radius = 500; for (let i = 1; i <= 10; i++) { if (Math.random() >= 0.5) { context.fillStyle = 'yellow'; } else { context.fillStyle = 'red'; } context.arc(600, 600, radius / i, 0, Math.PI * 2); context.fill(); } </script> </body> </html>Estoy tratando de dibujar varios círculos que se harán más pequeños a medida que se ejecuta el ciclo, pero todo lo que obtengo es un círculo grande, ¿puede encontrar el problema con mi código o lógica? Estoy cansado de probar cosas y encontrar una solución porque el formato de mi bucle parece ser el correcto.
Al usar funciones de ruta de lienzo, debe especificar cuándo comienza y cuándo termina una ruta.
Si no lo hace, todas las llamadas de context.arc se fusionarán en una gran ruta que se llenará cada vez con el último color dado.
Aquí está la solución a su problema:
context.beginPath(); context.arc(600, 600, radius / i, 0, Math.PI * 2); context.fill(); context.closePath();