flor de circulos | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

<canvas width="600" height="400"></canvas> <script> var pantalla = document.querySelector("canvas"); var pincel = pantalla.getContext("2d"); pincel.fillStyle = "lightgray"; pincel.fillRect(0, 0, 600, 400); function dibujarCirculo(x, y, radio, color) { pincel.fillStyle = color; pincel.beginPath(); pincel.arc(x, y, radio, 0, 2*3.14); pincel.fill(); } dibujarCirculo(300,200,20,"red");//centro dibujarCirculo(260,200,20,"orange");//izquierda dibujarCirculo(340,200,20,"black");//derecha dibujarCirculo(300,160,20,"yellow");//arriba dibujarCirculo(300,240,20,"blue");//abajo </script>

Claro, creo que no da el valor del radio; entonces yo lo resolví así... pero creo que es lo mismo:

dibujarCirculo(300,200,50,"red");
dibujarCirculo(300,100,50,"yellow");
//arranco desde 300 igual que el rojo, pero resto el tamaño del círculo = 50*2 (porque radio es 50, y necesito diámetro que es r*2);
dibujarCirculo(200,200,50,"orange");
//resto (porque aparece antes que el círculo rojo) el tamaño del círculo rojo al principio; y mantengo el valor de "y = altura".
dibujarCirculo(400,200,50,"black");
//sumo el tamaño del círculo rojo al principio, y mantengo el valor de "y = altura".
dibujarCirculo(300,300,50,"blue");
//sumo el tamaño del círculo rojo al principio, y sumo el valor de "y = altura" del rojo desde su inicio (y = 200+100).


... Y bueno, recién veo la respuesta, y el profe lo resuelve al final con una función para hacerlo más efciente y flexible!!!! ;)