En este código, se dibuja el círculo rojo central en las coordenadas (300,200) y luego se dibujan seis pétalos alrededor del círculo, cada uno separado 60 grados del siguiente. Los pétalos están dibujados como círculos de color rosa claro. La función dibujarCirculo() es la misma que has definido antes, y se utiliza tanto para el círculo central como para los pétalos.
var pantalla = document.querySelector("canvas"); var pincel = pantalla.getContext("2d"); pincel.fillStyle = "lightgray"; pincel.fillRect(0, 0, 600, 400);
// Dibujar el círculo rojo central dibujarCirculo(300, 200, 20, "red");
// Dibujar los pétalos var radioPetalo = 40; var anguloInicial = Math.PI/2; // 90 grados var incrementoAngulo = Math.PI/3; // 60 grados for (var i = 0; i < 6; i++) { var angulo = anguloInicial + iincrementoAngulo; var x = 300 + radioPetaloMath.cos(angulo); var y = 200 + radioPetalo*Math.sin(angulo); dibujarCirculo(x, y, 20, "pink"); }
// Definir la función para dibujar un círculo function dibujarCirculo(x, y, radio, color) { pincel.fillStyle = color; pincel.beginPath(); pincel.arc(x, y, radio, 0, 2*Math.PI); pincel.fill(); }
